javascript - Vue.js 延迟 v-if 切换

Question

我想延迟 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 解决方案？

Answer 1

如果你只是想强制延迟v-if响应并且您已经在使用 <transition> , 你可以通过使用 transition-delay 来欺骗延迟您要等待的持续时间，例如transition-delay: 300ms ，并设置 transition-duration: 0这样您实际上就不会褪色。

另一种方法是实际延迟传递给 v-if 的变量的更新。 .由于变量是动态更新的(否则你不能切换 v-if)，你可以使用 window.setTimeout(...)改为更新它的值，以便您可以创建延迟效果。此解决方案需要稍微小心一些，因为例如，您可能希望在用户快速切换元素时取消相同的超时。