丝滑过渡取决于三个硬条件：transition必须写在基础样式中而非:hover里，仅作用于可动画化属性（首选transform/opacity），并配合cubic-bezier()优化速度曲线；错误配置会导致移出时突兀跳回。
丝滑的过渡效果不靠“加时长”或“堆属性”，而取决于三个硬条件：transition写在基础样式里、只作用于可动画化属性、搭配硬件加速的 transform/opacity。
transition 必须声明在默认状态，不能只放 :hover 里
鼠标悬停时动画正常，移开却“啪”一下跳回——这是最典型的配置错误。根源是 transition 被写进了 :hover 选择器，导致离开时规则失效，浏览器直接丢弃动画逻辑。
- 正确做法：把
transition放在元素的基础类（如.btn或button）中，确保进和出都受控 - 错误示例：
.btn:hover { transition: background-color 0.3s; }—— 移出无动画 - 正确示例：
.btn { transition: background-color 0.3s ease; }，再配.btn:hover { background-color: #1E5799; }
只对 transform 和 opacity 做过渡，别碰 background-color 或 width/height
background-color 过渡在深色模式切换或低端设备上易卡顿；width/height 触发重排（layout），性能开销大且不可预测。
- 首选组合：
transform（缩放、位移、旋转） +opacity—— 天然触发 GPU 加速，帧率稳定 - 可用但次选：
color、border-color、max-height（必须设具体数值，不能用auto） - 明确无效：
display、font-size、z-index、margin、padding—— 写了也不动，还可能干扰渲染
用 cubic-bezier() 替代 ease 或 linear
默认 ease 在按钮反馈、菜单展开等场景节奏感弱，容易显得“发飘”。cubic-bezier() 可精准控制起始/结束加速度，让动效更贴合物理直觉。
- 按钮悬停推荐：
cubic-bezier(0.25, 0.8, 0.25, 1)（先快后缓，有弹性感） - 下拉菜单展开推荐：
cubic-bezier(0.34, 1.56, 0.64, 1)（略带 overshoot，显轻盈） - Chrome DevTools 的 Styles 面板点一下 timing-function 小图标，就能拖拽实时调试曲线
transitionend 事件监听要过滤 propertyName
一个元素若同时过渡多个属性（如 transform 和 opacity），transitionend 会触发多次。不加判断就执行后续逻辑，容易重复调用或状态错乱。
- 必须检查
event.propertyName，只响应目标属性，例如：if (e.propertyName === 'transform') - 避免用
transition: all，否则无法预判哪些属性会触发事件 - 注意：该事件不会冒泡，需绑定在目标元素本身
真正影响丝滑感的，往往不是动画多长，而是是否触发了重排、是否依赖 CPU 计算、以及退出路径有没有被忽略。哪怕只加一行 transform: scale(1) 到基础样式，也能避免浏览器从 none 开始插值带来的行为偏差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
