opacity + transform 动画更流畅，因 transform 触发 GPU 合成层加速，避免重绘；需配合不改变视觉的 transform（如 translateZ(0)）并避免触发布局的属性。
opacity + transform 动画为什么比单纯用 opacity 更流畅
单纯改 opacity 会触发重绘（repaint），但加上 transform: translateZ(0) 或 transform: scale(1) 能让浏览器把它提升到合成层（compositor layer），动画由 GPU 加速，帧率更稳，尤其在低端设备或长列表中差异明显。
- 必须同时设置
opacity和一个「不改变视觉结果」的transform（如translateZ(0)、scale(1)或rotate(0)），否则仍可能掉帧 - 避免在动画中同时修改
width/height/top/left等触发布局（layout）的属性 -
will-change: opacity, transform可提前提示浏览器优化，但不要滥用——只加在真正要动的元素上，且动画结束后建议移除（可用 JS 切换 class 控制）
写一个可复用的渐入渐出 class 组合
直接定义两套 class，用 transition 控制入场/退场，比 @keyframes 更轻量、更易控制时机：
.fade-enter {
opacity: 0;
transform: translateZ(0) scale(0.98);
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.fade-enter-active {
opacity: 1;
transform: translateZ(0) scale(1);
}
.fade-exit {
opacity: 1;
transform: translateZ(0) scale(1);
transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
.fade-exit-active {
opacity: 0;
transform: translateZ(0) scale(0.98);
}
- 入场用
ease-out（先快后慢），更自然；退场用ease-in（先慢后快），避免“卡一下再消失” -
scale(0.98)比scale(0)更安全：不会导致子元素渲染异常，也不会影响getBoundingClientRect()计算 - 两个阶段的 transition 时间最好略有差异（如入场 250ms、退场 200ms），避免 JS 切换 class 时因 timing 重叠导致动画跳变
JS 控制动画触发时的常见坑
用 JS 添加/删除 class 触发动画时，浏览器可能合并 DOM 修改，导致样式没及时生效就进入下一帧，动画直接跳过：
- 不能这样写：
el.classList.add('fade-enter'); el.classList.add('fade-enter-active');—— 浏览器会一次性应用，无过渡 - 正确做法是：先加初始类，强制重排，再加激活类：
el.classList.add('fade-enter'); // 触发重排，确保浏览器读取到初始状态 void el.offsetWidth; el.classList.add('fade-enter-active'); - 更稳妥的方式是用
requestAnimationFrame：el.classList.add('fade-enter'); requestAnimationFrame(() => { el.classList.add('fade-enter-active'); });
移动端 Safari 的 transform 3D 兼容性注意点
iOS 15.4 之前，translateZ(0) 在某些混合模式或 fixed 定位下会意外裁剪内容；iOS 16+ 改进明显，但仍建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
translate3d(0, 0, 0)替代translateZ(0)，兼容性更稳 - 如果元素有
overflow: hidden，且父容器用了transform，Safari 可能错误裁剪——此时把transform移到更高层容器，或改用scale(1) - 不要依赖
backface-visibility: hidden来“修复”闪烁，它在部分 iOS 版本反而引发新问题
