我想延迟 v-if
切换,这样我的元素不会立即删除,而是在 300 毫秒后删除。我需要从 DOM 中删除元素,所以我需要使用 v-if
。
目前,我有一个有点老套的解决方案来完成这项工作。我将我的 v-if
语句包装在一个转换中,并使用 .3s
设置一个转换。
我在这里使用了不透明度,但我没有对它做任何事情,因为我不想让元素淡出,而只是延迟 v-if
切换。
我的元素:
<transition name="delay-display-none">
<div class="i-need-to-be-removed-after-300-ms"></div>
</transition>
我的风格:
.delay-display-none-leave-active {
transition: opacity .3s
}
.delay-display-none-leave-to {
opacity: 1
}
有没有更好的选择来完成这个而不是这个 hacky 解决方案?
最佳答案
如果你只是想强制延迟v-if
响应并且您已经在使用 <transition>
, 你可以通过使用 transition-delay
来欺骗延迟您要等待的持续时间,例如transition-delay: 300ms
,并设置 transition-duration: 0
这样您实际上就不会褪色。
另一种方法是实际延迟传递给 v-if
的变量的更新。 .由于变量是动态更新的(否则你不能切换 v-if),你可以使用 window.setTimeout(...)
改为更新它的值,以便您可以创建延迟效果。此解决方案需要稍微小心一些,因为例如,您可能希望在用户快速切换元素时取消相同的超时。
关于javascript - Vue.js 延迟 v-if 切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46687790/