从简单点击开始

实现一个点击控制div出现或消失的效果

<body>
	<div id="root">
		<div v-if="show">hello vue.js</div>
		<button @click="handleclick">switch</button>
	</div>

	<script type="text/javascript">
		var vm =new Vue({
			el:'#root',
			data:{
				show:true
			},
			methods:{
				handleclick:function(){
					this.show=(this.show === true?false:true)/*或者 this.show = !this.show*/
				}
			}
		})
	</script>
</body>

制作过渡动画

目的

我们想在点击按钮时让HTML内容逐渐出现或消失

语法

使用<transition></transition>包裹需要过渡效果的div，这个div还可以使用 "v-if","v-show", "v-is" 等操作

原理/流程

进入过渡

v-enter：定义进入过渡的开始状态。在过渡开始前被添加，在过渡开始时会被移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

当元素被<transition>包裹后，Vue会自动分析CSS样式并构建一个流程，在动画执行的一瞬间，在div中增加两个class名字：fade-enter和fade-enter-active,在动画进行第二帧时，删除fade-enter增加fade-enter-to，fade-enter-active一直存在到结束时都删除掉。

离开过渡

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡的生效状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在过渡开始时被添加，在过渡完成时会被移除。

这里解读基本同上

写入样式及理解

CSS部分以class格式写入， "fade"前缀为 "transition"标签的name值，若无name，默认前缀为v（就是v-enter，v-leave-to...）

逐渐出现

.fade-enter{opacity: 0;}
.fade-enter-active{ transition: opacity 2s; }

opacity（翻译为“透明度”）默认值为1。
fade-enter定义在动画开始时，透明度为0（完全没有），认为没有显示；当动画第二帧开始，fade-enter被删除，opacity值逐渐线性恢复默认的1，即正常显示。这时，fade-enter-active生效，通过始终存在的transition: opacity 2s设定恢复时间为2s。
由于出现结束透明度为默认的1，所以.fade-enter-to{opacity: 1}，即出现过渡的结束状态：透明度1，不必写出。

逐渐消失

.fade-leave-to{opacity: 0;}
.fade-leave-active{ transition: opacity 2s; }

由于消失前透明度为默认的1，所以.fade-leave{opacity: 1}，即消失过渡的初始状态：透明度1，不必写出。
fade-leave-to定义过渡结束时效果：透明度为0。动画开始到第二帧这个定义开始逐渐线性生效，直到结束后被删除。同时，通过从头到尾一直存在的transition: opacity 2s设定恢复时间为2s。

完整代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue的CSS动画</title>
	<script type="text/javascript" src="./Vue.js"></script>
	<style type="text/css">
		.fade-enter{opacity: 0;}                       /*初始透明度为0  消失->显示*/
		.fade-enter-active{ transition: opacity 2s; }
		.fade-leave-to{opacity: 0;}                     /*结果透明度为0  显示->消失*/
		.fade-leave-active{ transition: opacity 1s; }
	</style>
</head>
<body>
	<div id="root">
		<transition name="fade">
		<div v-if="show">hello vue.js</div>
		</transition>
		<button @click="handleclick">switch</button>
	</div>

	<script type="text/javascript">
		var vm =new Vue({
			el:'#root',
			data:{
				show:true
			},
			methods:{
				handleclick:function(){
					this.show=(this.show === true?false:true)/*或者 this.show = !this.show*/
				}
			}
		})
	</script>
</body>
</html>

Vue动画基础之CSS过渡动画原理