vue 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

详解
vue里边提供了transition封装的组件；可以给任何元素和组件添加进入/离开过渡。
在进入/离开的过渡中，会有 6 个 class 切换；
.v-enter:进入始状态
.v-enter-active:进入动画（Vue2）
.v-enter-to :进入末状态
.v-leave:进入始状态
.v-leave-active:离开动画（Vue2）
.v-leave-to:末状态

.v-enter-from 进入始状态、
.v-enter-to 进入末状态、
.v-enter-active 进入动画（Vue3）
.v-leave-from进入 始状态、
.v-leave-to 进入末状态、
.v-leave-active 离开动画（Vue3）