在网页开发中，css过渡（transition）是非常常用的动画手段，但不少人都遇到过这样的情况：元素第一次产生过渡效果后，之后再怎么操作也没有动画了。要解决这个问题，核心在于理解过渡的触发机制，并检查是否缺少类似hover这样的持续触发条件。
一、css过渡的基本工作原理
css过渡的作用是在元素的某个属性值发生变化时，让浏览器在一段时间内平滑地补间中间状态，而不是瞬间切换。它依赖两个前提：一是元素本身声明了transition属性，指定了要监听的属性和时长；二是该属性在某种条件下发生了实际的数值或状态变化。
例如下面这段代码，我们让一个盒子的背景色在宽度变化时产生过渡：
.box {
width: 100px;
height: 100px;
background: red;
transition: width 0.5s ease;
}
.box.active {
width: 200px;
}
当通过JS给.box添加active类时，宽度从100px变为200px，此时过渡生效。但如果只添加一次类，且之后没有移除或再次改变宽度，就不会有第二次过渡。很多“只生效一次”的问题，就是因为触发属性的变化只发生了一次。
二、缺少hover等触发条件的典型场景
最常见的情况是开发者误以为只要写了过渡，鼠标移上去就会一直有动画，但实际上并没有绑定:hover这类伪类。比如下面这段错误示范，元素没有任何持续触发源：
<style>
.tip {
opacity: 0;
transition: opacity 0.3s;
}
</style>
<div class="tip">提示文字</div>
<script>
document.querySelector('.tip').classList.add('show');
</script>
如果show类只是把opacity设为1，且脚本只执行一次，那么提示框淡入一次后便不会再变化。用户期待的是鼠标悬停时显示、离开时隐藏，这必须用:hover来提供双向触发：
.tip {
opacity: 0;
transition: opacity 0.3s;
}
.tip:hover {
opacity: 1;
}
这样鼠标移入移出都会改变opacity，过渡便能反复生效。因此，当过渡只跑一次时，第一步就应检查是否有类似:hover、:focus、:checked等能反复切换状态的触发器，或者JS是否只修改了一次属性。
三、使用JS重复触发过渡的注意事项
在纯JS控制场景下，若想让过渡多次生效，必须在每次动画结束后重置状态，再在下一轮重新改变属性。直接连续设置同一个值不会引发变化，浏览器也不会补间。正确做法是先移除类、强制重绘，再添加类。
function playTransition(el) {
el.classList.remove('active');
// 强制回流，确保浏览器感知到样式重置
void el.offsetWidth;
el.classList.add('active');
}
上面的void el.offsetWidth读取布局属性，会迫使浏览器立即重排，从而让后续添加active类时的属性变化被识别为新变化。如果不加这行，浏览器可能将两次操作合并，导致过渡不执行。这种技巧在轮播、刷新提示等需求中非常实用。
另外要注意，若元素是动态插入DOM的，应确保在插入并完成首帧渲染后再添加过渡目标类，否则初始状态与目标状态可能被浏览器合并为无变化。可以利用requestAnimationFrame分两帧处理。
四、其他容易导致过渡失效的原因
除了缺少触发条件，还有一些细节会让人误以为“只生效一次”。比如把transition写在会被整体替换的元素上，旧节点销毁新节点重建，过渡自然中断；或者过渡属性名写错，如将background写成backgroud，导致首次看似生效其实是其他动画。
| 现象 | 可能原因 | 排查方式 |
|---|---|---|
| 首次有动画，之后无 | 无持续触发条件 | 检查hover或JS是否重复改属性 |
| 完全没动画 | transition属性名错误 | 核对CSS属性拼写 |
| 动态元素无过渡 | 首帧未渲染就改类 | 用requestAnimationFrame延迟 |
通过对照上表，基本可以定位大多数“过渡只一次”的问题。核心记住：过渡不是元素自带的生命周期动画，而是属性变化的副产品，没有变化源就没有动画。
五、总结与最佳实践
当碰到css过渡效果只生效一次时，优先确认是否存在:hover、:focus等能反复触发的选择器，或JS是否提供了循环改变属性的逻辑。对于交互提示，尽量用伪类而非一次性JS类切换；对于命令式动画，使用强制重绘或双帧技巧保证每次变化都被感知。
保持过渡声明的稳定性，避免频繁重写transition本身，也能减少异常。只要把握住“属性持续变化才有持续过渡”这一原则，这类问题就能轻松化解。
css_transitionhover_triggertransition_repeat修改时间：2026-07-31 20:54:34