transition组件是Vue的内置组件

Vue2与Vue3都有该组件

可以用于控制组件切换时的效果，让用户有更好的体验感。

先看效果：

页面切换的时候由透明逐渐显示。

实现代码

//App.vue
<template>
  <transition enter-active-class="e-active" enter-to-class="e-to">
    <router-view></router-view>
  </transition>
</template>

<script>
export default{
	data(){
		return{

		}
	}
}
</script>

<style>
	.e-active{
		opacity: 0;
	}
	.e-to{
		opacity: 0;
		transition: 1.5s;
	}
</style>
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

如果是Vue3需要注意，transition的使用的时候，组件需要一个根标签，也就是template标签中要有一个div或者其他的标签

transition可以结合animate.css一起使用

以脚手架的项目为例：
1、通过 npm 下载 animate.css

npm install animate.css

2、在main.js中引入animate.css

import "animate.css";
1

3、将transition的class改成animate.css特定的CSS类名

<transition enter-active-class="animate__animated animate__flipInX">
    <router-view></router-view>
</transition>
1
2
3

类名必须是animate__animated animate__------的形式；------是CSS动画效果名。
具体可以看animate.css官网

效果：

transition的属性

enter-from-class——组件显示前执行的class
enter-active-class——组件显示中执行的class
enter-to-class——组件显示后执行的class
leave-from-class——组件消失前执行的class
leave-active-class——组件消失中执行的class
leave-to-class——组件消失后执行的class

enter-from-class与leave-to-class的效果是看不到的，所以在开发时较少使用这两个属性