用 vue 实现的动画，为什么却不按照预期来运行（已经添加了.fade-leave 类，但貌似不生效）

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2337 天前的主题，其中的信息可能已经有所发展或是发生改变。

运行效果也可在这查看： https://jsbin.com/leyeyureki/edit?html,css,js,output

 对这段代码的预期是: (1)在未触发动画前，.box 的 opacity 的初始值是 0.3 ； (2)在点击切换按钮时(使 show 变为 false)，离开过渡动画被触发,css 中 opacity 的 值先变成 1，然后经过 3s 后，opacity 的值变成 0。 问题在于：当点击切换按钮时，貌似.fade-leave 这个类并没有生效。 我不是已经在 css 中添加了.fade-leave 这个类了吗？ 但为什么点击切换时，它并没有将 opacity 的值首先变成 1. .fade-leave 这个类不是在离开过渡被触发时会立刻生效吗？

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" cOntent="width=device-width"> <title>JS Bin</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <input type="button" value="切换" v-on:click="handleClick"> <transition name="fade"> <div class="box" v-if="show">hello world</div> </transition> </div> </body> </html>

.box { /* .box 的初始值 */ opacity: 0.3; } /* 对这段代码的预期是: (1)在未触发动画前，.box 的 opacity 的初始值是 0.3 ； (2)在点击切换按钮时(使 show 变为 false)，离开过渡动画被触发,css 中 opacity 的 值先变成 1，然后经过 3s 后，opacity 的值变成 0。 问题在于：当点击切换按钮时，貌似.fade-leave 这个类并没有生效。 我不是已经在 css 中添加了.fade-leave 这个类了吗？ 但为什么点击切换时，它并没有将 opacity 的值首先变成 1. .fade-leave 这个类不是在离开过渡被触发时会立刻生效吗？ */ .fade-leave { opacity: 1; } .fade-leave-active { transition: opacity 3s; } .fade-leave-to { opacity: 0; }

var vm = new Vue({ el: "#app", data: { show: true }, methods: { handleClick: function() { this.show = !this.show; } } })

4 条回复 2019-07-25 16:41:46 +08:00

liyang5945

2019-07-25 08:48:40 +08:00

v-if 不是这么用的，v-if 的意思是否渲染出来这个元素，一开始 show 是 true，你再把 show 改成 false 也没用的，应该用 v-show，v-show 的作用才是显示隐藏

Kei

2019-07-25 09:09:53 +08:00

> 离开过渡动画被触发,css 中 opacity 的值先变成 1，然后经过 3s 后，opacity 的值变成 0。

并没有说明 opacity 0.3 -> 1 的动画时间

mozhizhu

2019-07-25 09:11:34 +08:00

请认真看官方示例（哪怕是原封不动的复制下来运行一次）；
例如你的过渡类名设定的“ fade";
涉及到的自动关联类名.fade-enter-active,.fade-leave-active,.fade-enter,.fade-leave-to;
显然，你并没有搞明白这一点。

manyfreebug

2019-07-25 16:41:46 +08:00

@mozhizhu 官方文档中不是说有 6 个 class 的切换吗？其中也包括了.fade-leave 啊
<a href="https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D">在进入 /离开的过渡中，会有 6 个 class 切换</a>