Question

是否可以制作动画，更具体地来说，＆＃34; fadeOut＆＃34;删除/销毁一个div做v-if有条件的？

我有最基本的条件：

<template v-if="initProxy">
  <div class="page__boot">
  <div>
</template>

在我的组件data道具中，当我将initProxy设置为false时，我想在渲染的div被破坏之前淡出它，而不是突然消失。我知道我错过了一些如此微不足道的建议吗？

Answer 1

您应该遵循此基本example

<template>
  <transition name="fade">
    <div class="page__boot" v-if="initProxy">
    <div>
  </transition>
</template>

调整你的动画：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

您还可以更改.fade-leave-active

的持续时间

在Vue中动画简单的v-if指令

1 个答案: