动画-使用过渡名实现动画
一、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>
运行结果：
进入离开时后位置移动。
总结：
过渡类型实现动画写出两组类即可
