javascript - 在 Vue 中为简单的 v-if 指令设置动画

Question

是否可以在 div 被删除/销毁时对 v-if 条件进行动画处理，更具体地说是“淡出”div？

我有最基本的条件:

<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 的持续时间