vue动画

　　vue 提供了一些显示、隐藏一些不同的过渡，效果主要跟 v-if v-show 动态组件

　　1. vue 给动画分了 6 个过程，在 css 中扮演 6 个类

　　.v-enter　　定义动画的开始状态

　　.v-enter-active　　定义动画生效时的状态

　　.v-enter-to　　定义动画结束是的状态

　　.v-leave　　定义动画离开的状态

　　.v-leave-active　　定义动画离开时生效的状态

　　.v-leave-to　　定义动画离开结束的状态　　

　　2. 给需要动画的元素套一层 transition 组件

　　3. 如果 transition 没有 name 的属性（没有名字），默认类的名称以 .v- 开头

　　　　<transition name="di"></transition>　　这个类的名称以 vue 动画，在 css 中扮演的 6 个类， .di-enter 定义动画的开始等等往后的 6 个都是以 .di- 开头

　　4. 自定义动画类跟 animate.css 结合

　　　　主要在标签上使用两个类即可　　enter-active-class = '进入类'　　enter-active-class = '淡出类'

　　　我们在使用 animate.css 的使用前要加 animated 的类名

　　1.的案例：style 部分　　body 部分　　css 部分

　　　　

　　　　

　　　　

　　但其实我们并不需要每次都使用 6 个类来完成动画，而且我们还可以定义类名

　　3.的案例：style部分　　html 部分　　js 部分与上面的案例 js 部分一样

　　　　

　　　　

　　　4. 的案例　　style 部分　　html 部分　　js 部分与上面的案例一样

　　　　

　　　　

 　　以上是我们通过 css 来修改 动画的效果，接下来我们使用 js 来修改动画的效果

　　template 中的写法　　el 代表被  transition 包裹的元素

　　　　

　　js 中的写法