Vue.js延迟v-if切换

时间:2017-10-11 12:05:34

标签: javascript vue.js vuejs2 vue-component

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

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:-1)

我认为这是更好的解决方案,供您参考 check out this link