css transition默认不重播，需强制重排（如void element.offsetwidth）打断当前动画实例，才能每次触发都从头开始；transition必须写在初始状态而非伪类中，且仅对可插值属性生效。
transition 不重播？先打断当前动画实例
CSS transition 默认不会“重头开始”，哪怕你反复添加同一个 class。浏览器把它看作一次连续的状态变化，中间没断开，就不会重置计时器。想让它每次点都从头播，必须主动打断正在运行的过渡过程。
最可靠的方式是强制重排（reflow）：修改一个不影响视觉但会触发样式重计算的属性，比如 void element.offsetWidth，或者设 animation-duration 为极小值再立刻改回。前者更通用、无副作用。
- 不要依赖
animation-fill-mode: none—— 它只控制首尾停顿，不重置播放位置 - 避免用
setTimeout(..., 0)模拟“下一帧”，它不保证渲染时机，高负载下可能失效 - 如果元素已处于目标状态，
offsetWidth仍有效：它强制浏览器同步计算当前布局，为后续样式变更建立新的起始快照
JS 修改样式后 transition 失效？检查是否漏了重排
直接写 element.style.left = '100px' 后 transition 没反应，大概率是因为你没给浏览器机会记住“起始值”。transition 需要两个独立渲染帧：第一帧记录旧值，第二帧应用新值，中间必须有一次 layout 触发。
典型错误写法：element.style.transition = 'left 0.3s'; element.style.left = '100px'; —— 这两行在 JS 执行流中是连续的，浏览器合并为一次渲染，没有“变化过程”。
- 正确顺序：先设初始样式（含
transition），再读offsetHeight或getBoundingClientRect()强制重排，最后改目标值 - 内联样式里写
transition本身没问题，但必须确保它出现在“变化前”的那一帧 - 别用
display: none→display: block切换去触发 transition：display 不可过渡，浏览器直接跳变，得用opacity+transform或max-height替代
transition 写在哪才生效？必须在初始状态声明
transition 必须写在元素的默认样式（即未 hover、未 active、未加 active 类时）里，而不是只放在 :hover 或 .active 中。否则第一次状态变化时，transition 规则还没被浏览器识别，就直接跳到新值。
例如按钮背景色渐变：button { transition: background-color 0.2s; } ✅；而 button:hover { transition: background-color 0.2s; } ❌ —— 移入时有动画，但移出时可能没过渡（因为离开时规则才刚生效）。
- 检查 DevTools 的 Computed 面板，确认
transition-property实际值不是none - 多个
transition声明会覆盖而非叠加，父元素写了all 0.2s，子元素再写opacity 0.3s，子元素就只过渡 opacity - 慎用
transition: all：z-index、visibility 等不可插值属性也会被纳入，可能引发意外重绘或卡顿
如何让鼠标离开时不反向过渡？用 JS 清除并跳转终态
CSS transition 天生对称：进和出共用同一套时长与缓动。如果你希望鼠标一移开就立刻回到原位（不等动画收尾），只能靠 JS 干预 —— 浏览器不提供“中断并跳转”的原生能力。
核心思路是绕过 transition 调度：在 mouseleave 时，先临时禁用过渡，同步设置终态样式，再恢复 transition，为下次触发做准备。
- 推荐做法：加一个
.no-transitionclass，里面写transition: none !important;，用classList控制开关 - 比直接操作
style.transition = 'none'更安全：避免与其他内联样式冲突，也方便调试 - 如果目标状态涉及多个属性（如同时改
opacity和transform），需确保它们都在同一帧内完成赋值，否则部分属性仍可能过渡
最容易被忽略的一点：transition 是否生效，不取决于“有没有写”，而取决于“写在哪”“变的是什么”“浏览器认不认”。很多问题表面是 JS 控制失灵，实际是 CSS 规则位置错了，或者过渡的属性根本不可插值 —— 先查 computed styles，再动代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
