Vue.js 延迟 v-if 切换

Question

我想延迟v-if切换，以便我的元素不会立即删除，而是在 300 毫秒后删除。我需要从 DOM 中删除元素，所以我需要使用v-if.

目前我有一个有点hacky的解决方案来完成这项工作。我将我的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 解决方案？

Answer 1

如果您只是想强制延迟v-if响应并且您已经在使用，则可以通过使用您想要等待的持续时间（例如 ）<transition>来欺骗延迟，并进行设置，以便您实际上不会淡出任何内容。transition-delaytransition-delay: 300mstransition-duration: 0

另一种方法是实际延迟传递给 的变量的更新v-if。由于变量是动态更新的（否则无法切换 v-if），因此可以使用window.setTimeout(...)更新其值来代替，这样就可以创建延迟效果。此解决方案需要稍微小心一些，因为例如，每当用户快速切换元素时，您都希望取消相同的超时。