用 vue 实现的动画，为什么却不按照预期来运行（已经添加了.fade-leave 类，但貌似不生效）
manyfreebug · 2019-07-24 23:04:41 +08:00 · 2328 次点击这是一个创建于 1928 天前的主题，其中的信息可能已经有所发展或是发生改变。
运行效果也可在这查看： 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
 |
1
liyang5945 2019-07-25 08:48:40 +08:00
v-if 不是这么用的，v-if 的意思是否渲染出来这个元素，一开始 show 是 true，你再把 show 改成 false 也没用的，应该用 v-show，v-show 的作用才是显示隐藏
|
 |
2
Kei 2019-07-25 09:09:53 +08:00
> 离开过渡动画被触发,css 中 opacity 的值先变成 1，然后经过 3s 后，opacity 的值变成 0。
并没有说明 opacity 0.3 -> 1 的动画时间 |
 |
3
mozhizhu 2019-07-25 09:11:34 +08:00
请认真看官方示例（哪怕是原封不动的复制下来运行一次）；
例如你的过渡类名设定的“ fade"; 涉及到的自动关联类名.fade-enter-active,.fade-leave-active,.fade-enter,.fade-leave-to; 显然，你并没有搞明白这一点。 |
 |
4
manyfreebug OP @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> |
Select Language