transition: all 在 Safari 和 Firefox 中易卡顿，因其强制浏览器监听所有可动画属性，即使只改 opacity 也会检查 width、margin 等触发布局的属性，导致重排/重绘；Firefox 更保守，遇 display: none 等不可动画状态可能直接跳过整个过渡规则。
为什么 transition: all 在 Safari 和 Firefox 中容易卡顿
因为 all 会让浏览器对所有可动画属性做监听和响应，哪怕你只改了 opacity，它仍可能去检查 width、margin、background-color 是否有变化——这些属性一动就触发重排或重绘。Safari 尤其敏感，Firefox 则更严格解析变更链，稍有不一致就降级到主线程渲染。
哪些属性必须显式列出才能保性能
只过渡真正会变的、且是合成属性（composited）的那几个：
-
transform（含translateX、scale、rotate等） opacity
其他如 top、left、width、color、box-shadow 都不该混进 transition 声明里。哪怕你“暂时没改它们”，all 也会让浏览器持续做无谓判断。
Firefox 中 transition: all 导致动画直接失效的典型现象
常见于 hover 动画或 class 切换后动画不动，控制台无报错，但 DevTools 的 Animations 面板里看不到时间轴——根本原因是 Firefox 对 all 的解析更保守：如果目标元素初始状态里某个属性不可动画（比如 display: none），它可能直接跳过整条 transition 规则。
- 错误写法：
transition: all 0.3s ease; - 正确写法：
transition: transform 0.3s ease, opacity 0.3s ease; - 若还需颜色渐变，且确认该颜色值支持硬件加速（如纯
rgba()或hsl()），可加：transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease;——但注意，color在旧版 Safari 中仍可能走主线程
如何快速定位页面中残留的 transition: all
在 Chrome 或 Safari DevTools 的 Elements 面板中，用 Ctrl+F（Win）或 Cmd+F（Mac）搜索 transition: all 或 transition-property: all；更彻底的方式是运行这段脚本：
getComputedStyle(document.body).transitionProperty === 'all' && console.warn('body has transition: all');
再逐个检查 :hover、.active、.open 等动态类里的 transition 声明。Animate.css 类库用户尤其要注意，某些自定义 build 可能默认启用了 all。
真正影响性能的从来不是“动画多不多”，而是“浏览器有没有被逼着反复做 layout 和 paint”。删掉一个 all，有时比加十个 will-change 更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
