最有效做法是用transform和opacity替代其他属性动画，因其仅触发gpu合成、避开重排重绘；位移用translatex替代left，缩放用scale替代宽高，显隐用opacity替代display/visibility。
直接用 transform 和 opacity 替代，这是最有效、最可靠的做法。其他方案都是围绕这个核心的补充或变通。
只用安全属性做动画
浏览器对 transform（含 translateX、translateY、scale、rotate）和 opacity 做了深度优化，它们不修改文档流，不改变元素几何尺寸，只触发合成（composite），由 GPU 加速处理，完全避开重排与重绘。
- 位移：用
transform: translateX(100px)替代left: 100px或margin-left: 100px - 缩放：用
transform: scale(1.2)替代改width/height - 显隐：用
opacity: 0控制淡出，不要用display: none或visibility: hidden - 避免混搭：比如同时写
left: 10px和transform: translateX(10px)，left仍会触发布局计算
替代 height/width 动画的实用技巧
当必须实现“展开”“收起”这类高度变化效果时，不能直接过渡 height，但有几种稳定可用的方式：
-
max-height 过渡：设一个足够大的上限值（如
max-height: 500px），从0过渡到该值；注意height: auto不可插值，不能用于 transition -
transform + overflow：用
transform: scaleY()配合overflow: hidden，再通过transform-origin: top控制缩放基点 -
JS 配合 class 切换：动画开始前用 JS 获取真实高度，设为内联
height，再过渡；结束后清除内联样式，保持 CSS 管理逻辑清晰
移动端特别注意的细节
H5 页面在 iOS Safari 和中低端安卓机上对精度和图层更敏感，需额外留意：
- 小数位移建议 ≥ 0.01px，例如
translateX(0.01px)，避免0.001px被忽略 - 需要强性能保障时，可在动画前一刻加
will-change: transform，动画结束立即移除，不长期挂载 - 慎用
translateZ(0)：它强制新建图层，过多会增加内存压力和过度绘制，仅在关键动效元素上使用 - 避免在
scroll或resize回调里直接操作style.left，应节流 +requestAnimationFrame+transform组合
结构与写法层面的预防
很多重排不是来自动画本身，而是来自写法松散引发的连锁反应：
- 别写
transition: all或transition: margin 0.3s——margin是简写，内部可能拆成四方向，且任意一个方向变化都可能意外触发重排 - 批量样式变更优先用
className切换预设类，而非逐个设置el.style.xxx - 读取布局信息（如
offsetHeight、getBoundingClientRect()）必须集中前置，所有写操作统一后置，避免读写混用导致强制同步重排 - 动画元素父容器尽量设
contain: layout paint（支持环境下），进一步隔离渲染影响范围
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
