如何避免CSS反向过渡时出现transition-delay延迟问题？

可以解决，核心思路是通过动态调整不同状态下的过渡延迟，让反向过渡时能立即中断当前动画并执行对应属性的反向过渡，不需要等待原延迟结束。

实现方案 #

假设基础样式中，div的初始宽高为100px，过渡时长设为1s：

.box {
  width: 100px;
  height: 100px;
  background: #42b983;
  /* 默认状态：width无延迟，height延迟1s（hover时先放大宽度再放大高度） */
  transition: width 1s 0s, height 1s 1s;
}

.box:hover {
  width: 200px;
  height: 200px;
  /* hover状态：height无延迟，width延迟1s（移出时先缩小高度再缩小宽度） */
  transition: height 1s 0s, width 1s 1s;
}

原理说明 #

• 初始状态下，过渡规则定义width立即执行，height延迟1s，保证hover触发时先完成宽度放大，再启动高度放大。
• 若在width过渡过程中移出鼠标，元素切换回非hover状态，过渡规则立刻恢复为初始配置，width的反向过渡会立即开始，无需等待原hover状态下的延迟。
• 同理，若在height反向过渡时再次hover，:hover状态的过渡规则会立即生效，height的正向过渡直接启动，跳过原非hover状态下的height延迟。

优化细节 #

如果需要更平滑的中断体验，可添加transition-behavior: allow-discrete（现代浏览器支持），让过渡状态切换时直接从当前属性值开始反向动画，避免突兀跳转：

.box {
  /* 保留原有样式 */
  transition-behavior: allow-discrete;
}

内容的提问来源于stack exchange，提问作者Aelita