<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中。

被transition标签包裹的元素在其显示隐藏时,六个不同的阶段会自动添加6个class名

元素进入的第一帧 [transition name 属性]-enter
元素进入中 [transition name 属性]-enter-active
元素进入的最后一帧 [transition name 属性]-enter-to
元素离开的第一帧 [transition name 属性]-leave
元素离开中 [transition name 属性]-leave-active
元素离开的最后一帧 [transition name 属性]-leave-to

这里我们用一个demo来实现一些基本的使用,我们这里就不使用单文件来演示了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<body>
<!--引入Vue三方库-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--创建一个DOM元素-->
<div id="app">


<transition name="fade">
<div class="box" v-if="show"></div>
</transition>


<button @click="show = !show">show/hidden</button>
</div>

<script>
// 实例化一个Vue对象
// Vue 构造函数接收配置对象
new Vue({
el: '#app', // el 指定页面中DOM元素,Vue就会以这个DOM为挂载对象
data: {
show: true,
todos: [{
id: 1,
text: 'todos'
}]
}
})
</script>
</body>

从上面可以看到,transition定义了name为fade,所以我们之后写的类名就一fade开头。

下面是官方的解释:

name - string,用于自动生成 CSS 过渡类名。例如:name: 'fade' 将自动拓展为 .fade-enter.fade-enter-active 等。默认类名为 "v"

更多详情请点击前往官网查看transition

接下来,我们进行书写动画的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}

.fade-enter,
.fade-leave-to {
/*元素进入动画第一帧 类名*/
opacity: 0;
transform: translateX(300px);
width: 0;
height: 0;
}

.fade-enter-active,
.fade-leave-active {
/*元素进入整个过程中 类名*/
transition: all .5s linear;
}

.fade-enter-to,
.fade-leave {
/*元素进入动画最后一帧 类名*/
opacity: 1;
transform: translateX(0);
width: 100px;
height: 100px;
}