开发者学堂课程【Vue.js 入门与实战：动画-使用过渡名实现动画】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8164
动画-使用过渡名实现动画
一、Vue中的动画
Vue中的动画的功能：
淡入淡出，位置简单位移，透明的渐变
为什么要有动画：
动画能够提高用户的体验，帮助用户更好的理解页面中的功能，本质目的不是为了效果好看，而是帮助用户理解页面功能
完整动画又进入把动画分成了进入和离开两个部分
进入时：
透明的0变为透明的1，进入之前状态透明的为0，v-enter代表进入元素的起始状态，即初始样式，v-enter-to代表动画进入完成之后的结束状态，起始状态到结束状态中间有一段时间，时间段为v-enter-active,进入状态有v-enter和v-enter-to两个时间点和一个时间段
离开时：
半场动画，分为即将离开之前的起始状态v-leave，离开之后的终止状态为v-learv-to,从起始到离开的时间段为v-leave-active
总结：
进入完成之后与即将离开之前状态是一致的，进入之前和离开之后两个状态也是较为相似，相似的可以写为一组
在进入/离开的过渡中,会有6个class切换。
1.v-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
2.enter-active:定义过渡的状志。在元素整个过渡过程中作用,在元素被插人时生效,在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
3.enter-to:2.1.8版及以上定义进入过渡的结東状态。在元素被插入一帧后生效(于此同时v-enter被删除),在 transition / animation 完成之后移除。
4.v-leave:定义离开过渡的开始状态,在离开过渡被触发时生效,在下一个帧移除。
5.v-leave-active:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition / animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
6.v-leave-to:2.1.8版及以上定义离开过渡的结束状态。
在离开过渡被触发一帧后生效(于此同时v-leave被删除),在 transition / animation 完成之后移除。
对于这些在enter/leave 过渡中切换的类名，V- 是这些类名的前缀。使用<transition name= "my-transition">可以重置前缀，比如v-enter替换为my-transition-enter.
v-enter-active和v-leave-active 可以控制进入离开过渡的不同阶段,在下面章节会有个示例说明。
二、Vue动画案例
1. 不使用动画
创建02.动画-不使用动画.Html
<!DOCTYPE html><html lang "en"> <head> <meta charset="UPE-8"> <meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src= "./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> //构建按钮，设置点击事件，点击false变为true <input type="button" value="toggle" eclick="flag=!flag"> <!--需求: 点击按钮，让h3显示，再点击让h3隐藏--> <h3 v-if=”flase”>这是一个H3</h3> </div> <script> //创建vue实例，得到ViewModelvar vm = new vue ({ el: 'app', data: { //在data上构建标识符,默认隐藏 Flag:false }, methods: {} }); </ script>
运行结果：
2. 过渡的类名实现动画
创建03.动画-使用过渡类名实现动画.html
<!DOCTYPE html><html lang "en"> <head> <meta charset="UPE-8"> <meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src= "./lib/vue-2.4.0.js"></script> //第二步：自定义构建两种样式来控制transistion内部的元素控制动画 <style> /*v-enter【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入*/ /*v-leave-to[这是一个时间点]是动画离开之后，离开的终止状态，此时，元素动画已经结束了*/ /*这是第一组*/ .v-enter , .v-leave-to{ Opacity:0; } /*第二组*/ *v-enter-active【入场动画的时间段】*/ /* v-leave-active【离场动画的时间段】*/ .v-enter-active, .v-leave-active { //设置动画耗费多少毫秒，控制哪些元素实现 Transition:all 0.4s ease; } </style> </head> <body> <div id="app"> //构建按钮，设置点击事件，点击false变为true <input type="button" value="toggle" eclick="flag=!flag"> <!--需求: 点击按钮，让h3显示，再点击让h3隐藏--> //第一步：使用transition元素把需要被动画控制的元素包裹起来,transition是vue官方提供的元素 <transition> <h3 v-if=”flase”>这是一个H3</h3> </transition> </div> <script> //创建vue实例，得到ViewModelvar vm = new vue ({ el: 'app', data: { //在data上构建标识符,默认隐藏 Flag:false }, methods: {} }); </script>
运行结果：
动画是渐渐的进入和离开的样式
可以在进入之前添加位移
<style> .v-enter , .v-leave-to{ Opacity:0; Transform:translateX(150px); } </style>
运行结果：
进入离开时后位置移动。
总结：
过渡类型实现动画写出两组类即可
