Vue过渡中v-leave CSS类有什么用？

Question

只是探索在我的项目中引入Vue过渡的可能性，根据文档，过渡过程中可以使用的类有6个，v-leave就是其中之一，但好像没用过在任何例子中。

所以，我创建了一个如下所示的简单示例来看看它是如何工作的，似乎 v-leave 类被添加到元素中但它没有任何效果？

谁能指出我哪里做错了？

提前致谢。

new Vue({
  el: '#demo',
  data: {
    show: false 
  }
})

.v-leave {
  transform: translateY(50px);
}	
.v-leave-to {
  opacity: 0;
}
.v-leave-active{
  transition: all 1s ease;
}
.v-enter {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}		
.v-enter-active {
  transition: opacity 1s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition>
    <p v-show="show">hello</p>
  </transition>
</div>

Answer 1

您应该执行以下操作才能进入/离开：

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="demo">
   <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

CSS：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}

您的主要问题是为过渡设置一个名称（在本例中为 fade），然后从 CSS 中引用它。

official documentation Working example [here][1] 中有一个像你这样的优秀例子

编辑：

在文档中：

v-leave：离开的开始状态。离开时立即添加 触发过渡，一帧后移除。

和：

v-leave-active：离开的活动状态。 [...] 这个类可用于定义离开过渡的持续时间、延迟和缓动曲线

v-leave 仅用于detect 过渡的开始（并对其进行操作），但如果您使用它，所需的效果将仅渲染 1 帧。如果你想使用leave 动画，你应该使用leave-active 来指定持续时间和其他东西。

希望对你有帮助！