14.Vue3过渡和动画实现

1.认识动画

给组件显示和消失添加某种过渡动画,可以增加用户体验。
react本身不提供任何动画相关的API，需要使用第三方库react-transition-group
Vue提供一些内置组件和对应的API来完成动画，可以方便实现过渡动画效果。

显示/隐藏
Hello World
1
2

没有动画的情况下，内容显示或隐藏会非常生硬，给单元素或者组件实现过渡动画，可以使用transition内置组件。

将要实现动画的单个元素或者组件嵌套再transition中，设置name。

	
Hello World

1
2
3

在样式中设置过渡：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.transition组件的原理

当插入或删除包含在transition组件的元素中时，vue将会做以下处理：
1.自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除 CSS类名；
2.如果transition组件提供了JavaScript钩子函数，这些钩子函数在恰当的时机会被调用；
3.如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行。

class的命名规则
如果我们使用的是一个没有name的transition，class的命名以v-作为默认前缀。
如果我们添加了一个name属性，例如：那么class