Vue基础08动画

1 动画基础

Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。

包括以下工具：

1. 在CSS过渡和动画中自动应用class
2. 可以配合使用第三方CSS动画库，如Animate.css
3. 在过渡钩子函数中使用JavaScript直接操作DOM
4. 可以配合使用第三方JavaScript动画库，如Velocity.js

1.1 CSS过渡动画

transition组件会为嵌套元素自动添加class，可用于做css过渡动画

消息弹框动画

class
- fade-enter
- fade-enter-active

- fade-leave-to
- fade-leave-active

2 使用CSS动画库

通过引入过度类名

3 JS动画钩子

可以在<transition>属性中声明JavaScript钩子，使用JS实现动画

<transition
	v-on:before-enter="beforeEnter"
	v-on:enter="enter"
	v-on:after-enter="afterEnter"
	v-on:enter-cancelled="enterCancelled"
	v-on:before-leave="beforeLeave"
	v-on:leave="leave"
	v-on:after-leave="afterLeave"
	v-on:leave-cancelled="leaveCancelled"
>    
</transition>

4 列表动画

使用transition-group可以对v-for渲染的每个元素应用过度