应统一在初始态定义 opacity 和 transform 的 transition，共用相同 easing 函数与时间值，避免 layout 触发、父级截断合成层，并合理使用 will-change 提示 gpu 加速。
当同时对 opacity 和 transform（如 scale）设置 transition 时出现卡顿、不连贯，通常不是因为属性冲突，而是浏览器渲染机制和过渡触发条件没配好。
确保 transition 写在同一个声明块里
分开写或写在不同状态（比如 hover 和初始态）中容易导致过渡链断裂：
- ✅ 正确：初始态就定义完整过渡，hover 只改值
- ❌ 错误：初始态只写
transition: opacity 0.3s，hover 里再加transition: transform 0.3s
示例：
.box {
opacity: 1;
transform: scale(1);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.box:hover {
opacity: 0.6;
transform: scale(0.95);
}
避免 layout 触发打断 GPU 加速
transform 和 opacity 本可走合成层（compositor layer），但若元素受其他属性影响（如 width、height、top/left 等），可能强制回退到主线程重排，导致掉帧。
- 确保不同时动画
transform和left/top或盒模型属性 - 必要时加
will-change: transform, opacity提前提示合成（仅用于复杂动画，勿滥用） - 用 Chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing” 和 “FPS meter”，观察是否频繁重绘/重排
统一 easing 函数与时间，避免节奏错位
即使都写 0.3s，若一个用 ease、一个用 linear，视觉上会感觉“不同步”。尤其缩放和透明度变化速率不匹配时更明显。
- 两个属性共用同一组 timing function，例如都用
cubic-bezier(0.25, 0.46, 0.45, 0.94) - 时间值完全一致（包括单位），避免
300ms和0.3s混用（虽等价，但可读性和一致性差）
检查是否被父级 overflow 或 transform 中断合成层
父容器若设置了 overflow: hidden 或 transform: translateZ(0) 等，可能截断子元素的合成层提升，导致 opacity + transform 动画降级为软件渲染。
- 临时移除父级
overflow或transform测试是否改善 - 若必须保留，可在动画元素自身加
transform: translateZ(0)强制新建合成层（注意不要过度嵌套）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
