Javascript Vue.js延迟v-if切换

我想延迟一个

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
}

---

有没有更好的方法来代替这种骇人的解决方案呢？

如果你只是想强制延迟的

v-If

响应，而你已经在使用

，你可以通过使用你想要等待的时间的

转换延迟来欺骗延迟，例如
转换延迟：300ms
，并设置
过渡持续时间：0
，这样实际上就不会使任何东西褪色

另一种方法是实际延迟正在传递到
v-if
的变量的更新。由于变量是动态更新的（否则无法切换v-if），因此可以使用
window.setTimeout（…）
来更新其值，以便创建延迟效果。此解决方案需要稍微小心一点，因为您可能希望在用户快速切换元素时取消相同的超时，例如。
您可以通过两种方式来执行此操作：（1）使用
转换延迟：300ms
和
转换持续时间：0
，或（2）在触发变量后，使用
setTimeout（）
更新传递到v-if
300ms
中的变量。谢谢，第一个选项似乎比我原来的解决方案有所改进。我想我会坚持下去。请随意为您的解决方案创建答案。当然，我已经这样做了：）