Vue.js v-leave CSS类在Vue转换中有什么用途？

仅仅是探索在我的项目中引入Vue transition的可能性，根据文档，在转换过程中可以使用六个类，

v-leave

就是其中之一，但似乎没有在任何示例中使用它

因此，我创建了一个简单的示例，如下所示，以了解它是如何工作的，看起来类

v-leave

被添加到元素中，但它没有任何效果

有人能指出我哪里做错了吗

提前谢谢

newvue({
el:'演示'，
数据：{
节目：假
}
})

.v-leave{
变换：translateY（50px）；
}	
.离开{
不透明度：0；
}
.v-离开-激活{
过渡：所有的1容易；
}
.v-enter{
不透明度：0；
}
.v-进入{
不透明度：1；
}		
.v-enter-active{
过渡：不透明度1s；
}

切换
你好

要在进入/离开模式下工作，您应该执行以下操作：

HTML:

您的主要问题是为转换设置一个名称（在本例中为

淡入

），然后从CSS中引用它

世界上有一个像你这样的好例子

编辑：

在文件中：

v-leave：休假的开始状态。离开时立即添加 切换被触发，在一帧后删除

以及：

v-休假-活动：休假的活动状态。[…]此类可用于定义离开过渡的持续时间、延迟和缓和曲线

v-leave仅用于检测过渡的开始（并对其进行处理），但如果使用它，所需效果将仅呈现一帧。如果要使用

离开

动画，应使用

离开活动状态

来指定持续时间和其他内容

---

希望有帮助

你运行我的代码了吗？它起作用了。如果您为过渡指定了一个名称，例如

fade

，那么您需要像在那里那样为css添加前缀

。fade输入active

。我在这里没有使用名称，因此默认的css类是

v-enter-active

。是的，我使用了。。我正试图解释为什么左边的部分不起作用。在您的示例中，当输入时转换效果很好（淡入），但当离开时，不会。如果您喜欢官方的Vue.js教程（和我的教程），它在两种操作中都有效。如果我错过了一些可以帮助你的东西，请告诉我。如果你想知道为什么你的例子不起作用，这是另一个问题。我的意思是，在你的例子中，没有

。淡入淡出
类，对吗？如果您仔细阅读文档，实际上有一个
.v-leave
类可用于休假过渡，在您的情况下，它应该相应地更新为
.fade-leave
。我的问题是，我添加了
.v-leave
类，但它不起作用，在您的示例中，根本没有
.fade-leave
类（即使在官方文档中，作者也没有使用
.v-leave
）。明白了吗？看我的编辑，也许它澄清了你的问题，你说：
我添加了.v-leave类，但它不起作用了
，也许“它起作用了”，但只有1帧（你看不到）。这很奇怪，因为如果你能从我的代码中看出这是一个明显的移动（向下移动50像素），无论如何感谢你的解释：）
<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>

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