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

Question

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