transition必须写在属性实际发生变化的目标元素上，如卡片而非按钮；仅对opacity、transform等可过渡属性生效，禁用display控制显隐，优先使用transform和opacity触发硬件加速以避免卡顿。
transition 该写在哪个元素上才生效
过渡效果只对「自身属性变化」起作用，不是谁触发变化就写在谁身上。比如点击按钮切换卡片显示状态，transition 必须写在卡片元素（如 .card）上，而不是按钮上——按钮只是通过 JS 切换 .card 的 opacity 或 transform，真正需要动画的是卡片本身。
常见错误是把 transition 写在父容器或触发器上，结果一点反应都没有。记住：动画归属权在「被改变样式的元素」手里。
- 写在目标元素上，且该元素的 CSS 属性确实在发生可过渡的变化（如
opacity、transform、color，但不包括display、height（未设具体值时）、font-size（部分旧浏览器）） - 避免写在伪类（如
:hover）里单独声明transition，它可能被后续普通状态覆盖 - 如果用 JS 动态加 class 触发动画，确保 class 中修改的是可过渡属性，且
transition已提前定义在基础样式中
为什么 transition 突然不执行了
最常见原因是「属性变化不是连续的」。比如从 display: none 切到 display: block，浏览器跳过渲染中间帧，transition 直接失效；又或者刚加完 class 就立刻读取 offsetHeight，触发强制同步布局，打断了过渡队列。
另一个隐形杀手是「过渡属性没写全」。例如只写了 transition: opacity 0.3s，但实际变化的是 transform，那当然没动画。
立即学习“前端免费学习笔记（深入）”；
- 禁用
display控制显隐，改用opacity+visibility或transform+pointer-events - 需要 JS 触发时，用
setTimeout(() => {}, 0)或requestAnimationFrame延迟读取，避开 layout thrashing - 用
transition: all 0.3s ease谨慎——它会让所有可过渡属性都动，可能引发意外动画；推荐明确列出：transition: opacity 0.3s, transform 0.3s
transition 和 transform 怎么配合才不卡顿
关键在硬件加速。只有 transform 和 opacity 能进合成层（compositor layer），其他属性（如 top、left、width）会频繁触发重排（reflow）和重绘（repaint），尤其在滚动或高频交互中明显掉帧。
哪怕只写 transition: transform 0.3s，也比 transition: left 0.3s 流畅得多——因为前者走 GPU，后者走 CPU 主线程。
- 位移优先用
transform: translateX()，别用left/right - 缩放/旋转统一用
transform: scale()/rotate()，不用width/height/font-size - 必要时加
will-change: transform提前告知浏览器该元素将变化，但别滥用——它会常驻合成层，增加内存开销
单页应用路由切换时如何衔接 CSS 过渡
Vue/React 的组件卸载是立即发生的，而 transition 需要时间。直接销毁组件，动画根本来不及播完。必须等过渡结束再卸载，否则看到的是“闪退”而非“淡出”。
核心思路是：用 key 或 class 控制状态，靠 transitionend 事件或框架提供的生命周期钩子延迟卸载。
- React 中用
useState控制显隐，配合useEffect监听退出状态，在transitionend后调用setState卸载组件 - Vue 中用
<transition></transition>包裹路由出口，设置name并提供v-enter-active/v-leave-active类，内部用transform和opacity - 避免在
transition中依赖 JS 计算高度做动画（如max-height），它无法精确控制时间点，且性能差；改用transform: scaleY()模拟展开收缩更可控
真正难的不是写几行 transition，而是判断哪一帧该开始、哪一帧该清理、哪些属性能交出去、哪些必须拦下来自己算——这些边界，往往只在真机滚动和低端设备上才露馅。
