如何在移动端用CSS3动画替代JS动画以避免掉帧？-css教程-PHP中文网

必须用 transform 和 opacity 替代 left、top 等属性——因前者走 GPU 合成层，后者触发重排致移动端掉帧；JS 仅控制状态切换，动画全由 CSS 实现。

如何在移动端用css3动画替代js动画以避免掉帧？

直接用 transform 和 opacity 替代 JS 操作 left、top、width、height，是避免移动端掉帧最有效且必须做的一步——不是“建议”，是真机一测就暴露的硬性门槛。

为什么JS动画在移动端容易掉帧

JS 动画常靠 setInterval 或 requestAnimationFrame 不断修改元素样式（比如 el.style.left = x + 'px'），这会强制浏览器反复触发重排（reflow）和重绘（repaint）。移动端内存受限（iOS Safari 实测仅约 10MB 可用），一旦 layout 频繁发生，帧率立刻跌破 60fps，低端安卓机甚至卡在 20–30fps。而 CSS3 动画由 GPU 合成层处理，不占 JS 主线程，浏览器还能自动优化不可见区域的动画执行。

哪些CSS属性能真正避免掉帧

只有以下两类属性能稳定走合成层，不触发重排：

transform：包括 translateX()、translateY()、scale()、rotate()；注意别混用 top 或 margin，否则浏览器会降级回 CPU 渲染
opacity：透明度变化完全独立于布局，开销极低

以下属性必须避开：width、height、left、top、margin、padding、box-shadow、filter（除 blur(0) 等极简情况外）——它们都会拉起全链路渲染（Layout → Paint → Composite），真机上肉眼可见卡顿或闪动。

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

transition 和 @keyframes 怎么写才不翻车

关键不在“有没有加动画”，而在“是否让浏览器真正识别为可合成动画”：

过渡必须写在初始 CSS 中，例如：transition: transform 0.3s ease, opacity 0.3s ease;；不能靠 JS 临时加 class 再设 transition，否则首帧常被跳过
用 @keyframes 时，避免超过 5 个关键帧；中间帧别只改 opacity 而不动 transform，否则部分安卓 WebView 会丢帧
移动端务必加 will-change: transform;（仅在动画开始前 JS 设置，结束即清空），iOS Safari 尤其依赖这个提示来提前分配合成层
对 position: fixed 或 absolute 元素，补一句 backface-visibility: hidden;，能防止 iOS 拉出一半时出现白边或闪烁

JS 只负责开关，不插手位移计算

JS 的唯一任务是切换状态（如加/删 is-open 类），所有位移、缩放、透明度都由 CSS 控制：

抽屉展开：JS 改 el.classList.add('is-open')，CSS 里写 .drawer.is-open { transform: translateX(0); }
不要在 JS 里写 el.style.transform = 'translateX(' + x + 'px)'，尤其别在滚动监听里高频赋值——这会打断合成流水线
若需响应式位移（如宽度随视口变），用 translateX(-100%) 而非固定像素；但前提是抽屉容器有明确 width 声明，否则 -100% 行为不可控

最容易被忽略的是：动画结束后的清理动作。比如 will-change 必须在 transitionend 回调里立刻设回 auto，body 的 overflow: hidden 必须在抽屉收起瞬间移除（别等 transition 结束），否则用户会误触背景滚动或点击穿透。