应使用 transform:translatex 实现划入动画，因其仅触发合成层渲染、gpu加速、60fps稳定；避免用 left/margin-left，否则触发 layout+paint导致卡顿。
划入动画用 transform:translateX 而不是 left
直接改 left 或 margin-left 触发的是 layout + paint，动画卡顿明显；transform:translateX 只走合成层（compositor），GPU 加速，60fps 更稳。尤其在中低端手机或长列表里，差别肉眼可见。
常见错误是给元素设了 position: relative 后用 left: -100% 做初始态，再用 left: 0 动画——这等于放弃硬件加速。
- 初始状态统一用
transform: translateX(-100%)，目标状态用transform: translateX(0) - 必须搭配
transition: transform 0.3s ease-out（不能只写transition: all） - 如果父容器有
overflow: hidden，确保子元素 translate 不会意外裁切——有时 -100% 是相对父宽，有时是相对自身宽，得看transform-origin和布局上下文
如何让划入只触发一次，而不是滚动来回反复动
靠 CSS 自身无法判断“是否已进入视口”，必须结合 JS 监听滚动。但别用 scroll 频繁触发，容易掉帧。
推荐用 IntersectionObserver，轻量、原生、兼容到 iOS 12.2+ 和 Chrome 51+：
立即学习“前端免费学习笔记（深入）”；
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('slide-in');
observer.unobserve(entry.target); // 看过就不再监听
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.js-slide').forEach(el => observer.observe(el));
对应 CSS 里定义：
.js-slide {
opacity: 0;
transform: translateX(-20px);
}
.js-slide.slide-in {
opacity: 1;
transform: translateX(0);
transition: opacity 0.3s ease, transform 0.3s ease;
}
-
threshold: 0.1表示元素 10% 进入视口就触发，比0更早响应 - 务必调用
observer.unobserve()，否则同一元素多次进入/退出会重复加 class - 不要在
slide-in类里写transition: all，避免其他属性（比如color）也被加上过渡效果
transform:translateX 在 flex / grid 容器里行为异常？
flex 或 grid 子项如果没设 align-self 或 justify-self，translateX 位移后可能被容器“拉回”对齐位置，看起来像没动。这不是 bug，是规范行为：transform 不影响文档流，但 flex/grid 的对齐逻辑仍作用于原始几何框。
- 解决方法：给要动的元素加
align-self: flex-start（flex）或justify-self: start（grid），切断对齐约束 - 或者换用
margin-left+will-change: margin强制升层（不推荐，仅应急） - 测试时打开 Chrome DevTools → Rendering → “Paint flashing”，看划入过程是否整块重绘——如果是，说明没走合成层，得查有没有隐式层叠上下文打断了 transform 提升
移动端 Safari 上划入闪一下？
iOS Safari 对 transform 合成层更敏感，尤其在页面有 backface-visibility: hidden、perspective 或多个 transform 嵌套时，偶尔出现首帧闪烁或延迟一帧。
- 最简解法：给动效元素加
transform: translateZ(0)或will-change: transform（仅在需要时加，别全局滥用） - 避免同时写
transform: translateX() rotate()多个函数，拆成两个元素嵌套做，降低合成复杂度 - 如果用了
IntersectionObserver，iOS 15.4 之前存在首次进入不触发的问题，可 fallback 到getBoundingClientRect()+requestAnimationFrame检测
划入效果看似简单，但真正在各种机型、各种布局、各种加载时机下稳定运行，关键在克制——少一层嵌套、少一个过渡属性、少一次重复监听，就少一个出问题的点。
