根本原因是transition不定义结束态，仅执行A→B过程；若B态未在CSS中显式声明（如:hover仅设transform但默认态缺声明），浏览器便回退至初始值。
transition结束时元素跳动，根本原因是浏览器在过渡完成后没有“停住”目标状态，而是回退到原始样式——这不是bug，是transition的默认行为。
为什么transition结束后会跳回原样
transition本身不定义“结束态”，它只负责从A变到B的过程。如果B态没在CSS里显式写死（比如hover结束、class被移除），浏览器就按规则回退到初始值。常见场景包括：
- 用
:hover触发transform，鼠标移开后直接跳回transform: none - JS增删class控制动画，但目标class只定义了动画过程，没声明最终值（如只写了
.active { transform: translateX(100px); }，但默认态没设transform: translateX(0)） - 父容器
overflow: hidden，而子元素过渡中transform超出范围，裁剪边界变化造成视觉跳动
怎么让transition停在目标位置
关键不是加更多动画，而是确保“目标值”在DOM渲染周期里被浏览器明确识别并保留。实操要点：
- 始终在**默认态**和**目标态**都显式声明可过渡属性，例如：
transform: translateX(0);和transform: translateX(100px);，不能只写后者 - 避免用
display: none配合transition——display无法插值，一设即切，整个过渡中断。改用visibility: hidden+opacity: 0组合 - JS动态切换时，别同步增删class后立刻读取
offsetLeft或getBoundingClientRect()；加requestAnimationFrame延后一帧再操作，否则读到的是未完成过渡的中间值
transition和animation混用导致的回弹
如果元素同时有transition（比如transform 0.3s）和animation（比如位移keyframes），动画结束后浏览器可能按transition规则“补间”回初始值，造成二次跳变。
- 临时禁用transition：动画开始前设
el.style.transition = 'none';，动画结束回调里再恢复 - 把transition写进动画专用class里，而不是元素默认样式，避免叠加
- 检查是否误用了
animation-direction: alternate且没配animation-iteration-count: 1，导致第二轮反向播放“抽搐”
硬件加速与亚像素渲染干扰
即使逻辑正确，某些设备上仍可能因渲染管线问题出现微跳。这时要干预合成层：
- 给动画元素加
transform: translateZ(0)或will-change: transform（注意：仅对真正动画的元素加，别全局滥用） - 加
-webkit-backface-visibility: hidden，尤其在Chrome早期版本中能缓解初始闪烁 - 避免用
left/top做位移动画——它们触发重排；一律改用transform: translateX()等合成属性
最容易被忽略的是：transition的“终点”必须是CSS里写死的值，不是JS临时设置的内联样式，也不是靠继承或计算得来的值。哪怕只差一个transform: none没写，跳动就会发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
