css过渡必须定义在常态元素上，即button默认样式中；hover状态加transition无效，移出时无过渡；transition-delay仅对移入生效，移出需js控制或反向写法；避免transition:all以防重排和卡顿。
button:hover 里加 transition 无效？
直接在 :hover 里写 transition 没用——CSS 过渡必须定义在**常态元素**上，也就是非 hover 状态的 button 本身。浏览器只会在属性值变化时触发过渡，而 hover 只是切换状态，不负责控制“怎么变回来”。
- ✅ 正确做法：把
transition写在button默认样式里（比如button { transition: background-color 0.3s ease; }） - ❌ 错误写法：
button:hover { transition: ... }—— 移出时没过渡，直接跳回 - 注意
transition-property要和实际变化的属性匹配，比如改了background-color，就不能只写transition: all 0.3s（可能意外触发其他属性过渡）
transition-delay 在移出时生效吗？
transition-delay 只作用于**过渡开始前的等待时间**，且它只对“触发时”生效——也就是鼠标移入瞬间会延迟，但移出时不会额外延迟。想让移出也延迟，得靠 JavaScript 控制类名，或者用 transition 的反向写法（见下一条）。
- 默认
transition-delay: 0.1s→ 移入后等 0.1s 才开始变色，移出立刻恢复 - 若要移出也延迟，需手动加 class 并用 JS 在 mouseout 后延时 remove，或改用
transition: background-color 0.3s ease 0.1s（这个 0.1s 对移入有效，移出仍无延迟） - 真正“移出延迟”的常见解法：用
transition+opacity或transform配合will-change提升渲染性能，避免卡顿
为什么鼠标快速进出按钮会卡住或跳变？
过渡未完成时反复触发 hover，容易导致属性值冲突、过渡中断、甚至浏览器丢帧。特别是用 all 做过渡目标时，连 box-shadow、border、transform 全部一起动，计算开销大，更容易出问题。
- ✅ 推荐只过渡必要属性：
transition: background-color 0.25s ease, transform 0.25s ease - ⚠️ 避免
transition: all 0.3s—— 容易把 margin/padding/width 等布局属性也卷进来，引发重排（reflow） - 加
button { will-change: transform; }可提前告诉浏览器该元素将动画，提升 smoothness（但别滥用，每个都加会内存浪费） - 如果按钮有文字颜色变化，确保
color也在 transition 列表里，否则移出会突变
transition 和 pointer-events 配合能解决什么问题？
当按钮用了 transform: scale(1.05) 并配了过渡，鼠标快速划过时可能因缩放导致 hit area 变小，造成“刚 hover 就移出”的抖动。这时可临时禁用 pointer-events，给过渡留出完成时间。
- 例如：
button:hover { transform: scale(1.05); pointer-events: none; }，再配合 JS 在 transitionend 后恢复pointer-events: auto - 更轻量的做法：用
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)替代ease，让收尾更缓，减少“抢进抢出”感 - 移动端要注意：
:hover在 touch 设备上行为不一致，真要兼容得用touchstart+ class 切换
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
