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-delay延遲來欺騙延遲，例如transition-delay: 300ms ，以及設置transition-duration: 0這樣你實際上不會褪色。

另一種方法是實際延遲傳遞給v-if的變量的更新。 由於變量是動態更新的（否則您無法切換v-if），您可以使用window.setTimeout(...)來更新其值，以便您可以創建延遲效果。 此解決方案需要稍微小心，因為您可能希望在用戶快速切換元素時取消相同的超時，例如。