1.如何给Vue控制的元素添加过渡动画

1.1将需要执行动画的元素放到transition组件中

1.2当transition组件中的元素显示时会自动查找.v-enter/.v-enter-active/.v-enter-to类名

  当transition组件中的元素隐藏时会自动查找.v-leave/ .v-leave-active/.v-leave-to类名

1.3我们只需要在.v-enter和.v-leave-to中指定动画动画开始的状态

           在.v-enter-active和.v-leave-active中指定动画执行的状态

            即可完成过渡动画

1.transition注意点:

transition中只能放一个元素, 多个元素无效

如果想给多个元素添加过渡动画, 那么就必须创建多个transition组件

2.初始动画设置

默认情况下第一次进入的时候没没有动画的

如果想一进来就有动画, 我们可以通过给transition添加appear属性的方式

告诉Vue第一次进入就需要显示动画

3.如何给多个不同的元素指定不同的动画

如果有多个不同的元素需要执行不同的过渡动画,那么我们可以通过给transition指定name的方式

来指定"进入之前/进入之后/进入过程中, 离开之前/离开之后/离开过程中"对应的类名

来实现不同的元素执行不同的过渡动画

通过钩子函数来完成元素的过渡动画（以上通过类名的方式不能够保存动画运动后的状态）

1.当前过渡存在的问题

通过transition+类名的方式确实能够实现过渡效果

但是实现的过渡效果并不能保存动画之后的状态

因为Vue内部的实现是在过程中动态绑定类名, 过程完成之后删除类名

正式因为删除了类名, 所以不能保存最终的效果

2.在Vue中如何保存过渡最终的效果

通过Vue提供的JS钩子来实现过渡动画

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" 离开动画被取消

3.JS钩子实现过渡注意点

3.1在动画过程中必须写上el.offsetWidth或者el.offsetHeight

3.2在enter和leave方法中必须调用done方法, 否则after-enter和after-leave不会执行

3.3需要需要添加初始动画, 那么需要把done方法包裹到setTimeout方法中调用