用 transform + opacity 配合 transition 是最稳、最轻量、也最容易控制的方案，比 @keyframes + animation 更适合单次入场场景；left/top 会触发重排，transform 走合成层、gpu 加速，性能更优；opacity 支持过渡，visibility/display 不支持；需用 intersectionobserver 控制入场时机，避免滚动卡顿与资源浪费。
用 transform + opacity 配合 transition 是最稳、最轻量、也最容易控制的方案，比 @keyframes + animation 更适合单次入场场景。
为什么不用 left/top 做飞入位移
直接改 left 或 top 会触发浏览器重排（reflow），尤其在列表中多个图片同时进场时，滚动卡顿明显；transform 走的是合成层，GPU 加速，不重排也不重绘，性能好得多。
-
left: -200px→left: 0：强制重排，动画掉帧风险高 -
transform: translateX(-200px)→transform: translateX(0)：纯合成，60fps 有保障 - 同理，透明度必须用
opacity，别用visibility或display—— 它们不支持过渡
基础 CSS 写法（左飞入为例）
关键点：过渡声明写在基础类上，不是进场类里；初始状态藏在视口外，靠 JS 或伪类触发切换。
img.fly-in {
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
img.fly-in--in {
opacity: 1;
transform: translateX(0);
}
- 动画时长和缓动函数可按需调：
ease-out更自然，cubic-bezier(0.34, 1.56, 0.64, 1)可强化“弹入”感 - 不要给
img.fly-in--in单独加transition，否则类名切换瞬间会闪一下 - 移动端注意加上
-webkit-transition兼容旧 Safari
用 IntersectionObserver 控制入场时机
一打开页面就全播？体验差，还浪费资源。真正实用的飞入，是图片快进入视口时再启动。
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fly-in--in');
observer.unobserve(entry.target); // 防重复触发
}
});
},
{ threshold: 0.1 }
);
document.querySelectorAll('img.fly-in').forEach(img => observer.observe(img));
-
threshold: 0.1表示图片 10% 进入视口即触发，比0更早响应，避免“跳一下才动” - 别用
window.onscroll + getBoundingClientRect()手动轮询——没节流、移动端卡、快速滚动易漏判 - 如果要支持 IE，得降级用
scroll+debounce，但代价是代码变重、兼容性仍有限
容易被忽略的细节
飞入动画看着简单，但实际线上常出问题的地方很集中：图片没设宽高导致布局抖动、父容器 overflow: hidden 切掉了位移路径、img 加了 loading="lazy" 但 Observer 触发早于图片加载完成。
- 务必给
img设明确宽高，或用aspect-ratio防止 FOUC - 如果父容器有
overflow: hidden，确认transform位移范围没被裁掉（比如从 -100% 开始，但父容器高度不够） - 对懒加载图片，建议监听
img.onload后再调用observer.observe()，或用img.complete判断是否已缓存
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
