我正在开发一个Vue 2应用程序，它使用了Vue 2的过渡。每个过渡都有进入和离开动画，我试图禁用离开动画，因为它在某些情况下不太好用。
我有：
<transition name="slide-fade" :duration="{ enter: 1500, leave: 1 }">
<section id="step1" v-if="step == 1">
<!-- some html -->
</section>
</transition>有四个这样的过渡。还有，我在网上找到了这个CSS来隐藏离开过渡：
.slide-fade-leave-active {
display: none;
animation-duration: 0ms;
transition: none !important;
}如果缺少display: none，那么leave动画工作不正确，它基本上是从侧面动画，并在元素的中途消失，这是非常奇怪的。
在这个阶段，离开动画没有显示，但仍然需要额外的时间来启动新的进入动画，我想摆脱这种等待-我认为设置离开持续时间为0 ms或1 ms将禁用它，但它没有。
1条答案
按热度按时间cl25kdpy1#
Vue
<transition>不使用animation，而是使用transition。所以它不是
animation-duration，而是transition-duration：如果它仍然不起作用，我建议提供一个 runnableminimal reproducible example，我可以在那里看看你有什么和测试替代品。
**注意：**我不确定当您同时使用CSS和duration指令（
:duration="{ leave: n }）时，哪个优先-我猜指令优先。您可能想要从指示词中移除
leave部分。