如何禁用Vue 2中的过渡离开动画？

你当前的问题核心在于两个错误处理方式：一是display: none破坏了Vue过渡的生命周期逻辑，二是设置leave: 1ms仍会让Vue等待该时长才触发进入动画。按以下步骤调整即可解决：

1. 修正CSS，移除display: none #

display: none会强制元素瞬间脱离DOM，跳过Vue过渡的leave阶段钩子，直接导致过渡逻辑混乱，出现元素中途消失的怪异效果。换成下面的写法，让离开过渡瞬间完成且无视觉变化：

.slide-fade-leave-active {
  transition: none !important;
  animation: none !important;
  /* 强制禁用所有过渡/动画 */
}
.slide-fade-leave-to {
  opacity: 1;
  transform: translateX(0);
  /* 让离开后的状态与元素初始状态完全一致，避免任何视觉跳动 */
}

2. 调整transition组件的duration配置 #

把leave时长直接设为0，明确告诉Vue不需要等待离开过渡完成，立刻触发进入动画：

<transition name="slide-fade" :duration="{ enter: 1500, leave: 0 }">
  <section id="step1" v-if="step == 1">
    <!-- some html -->
  </section>
</transition>

3. 批量处理多个过渡组件 #

如果四个过渡组件都使用slide-fade作为过渡名称，上面的CSS和duration设置可直接复用；若使用不同名称，只需将CSS中的类名对应替换即可。

调整后，离开动画会瞬间完成（无任何视觉表现），进入动画会立即触发，不会再有额外等待时间，也不会出现元素异常消失的问题。

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