[英]Vue.js delay v-if toggle
我想延迟一个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解决方案?
如果你只是想强制延迟的v-if
响应并且你已经在使用<transition>
,那么你可以通过使用你想要等待的持续时间的transition-delay
延迟来欺骗延迟,例如transition-delay: 300ms
,以及设置transition-duration: 0
这样你实际上不会褪色。
另一种方法是实际延迟传递给v-if
的变量的更新。 由于变量是动态更新的(否则您无法切换v-if),您可以使用window.setTimeout(...)
来更新其值,以便您可以创建延迟效果。 此解决方案需要稍微小心,因为您可能希望在用户快速切换元素时取消相同的超时,例如。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.