问题的引入

首先我们完成一段通过点击控制div盒子出现及消失的代码

<div id="root">
	<div v-if='show'>hello world</div>
	<button @click="handleClick">change</button>
</div>

<script type="text/javascript">
	var vm = new Vue({
		el:'#root',
		data:{
			show:true
		},
		methods:{
			handleClick:function(){
				this.show = ! this.show 
			}
		}
	})
</script>

我们希望实现div盒子的渐入渐出的效果，所以引入了过渡动画的内容，这里我们使用CSS实现

CSS实现过渡动画

使用目的

在页面的构建过程中，往往会令单个的DOM元素或者单个组件进行出现或消失的操作，过渡动画则完成了令这些内容渐入渐出的效果

使用对象

条件渲染v-if
条件展示v-show
动态组件
组件根节点

使用方法

对需要添加动画效果的内容外部包裹一个<transition>标签，并编写相应的CSS样式

<transition name='fade'>
	<div v-if='show'>hello world</div>
</transition>

name属性

name ： string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 "v"

appear属性

appear ： boolean，是否在初始渲染时使用过渡。默认为 false。

过渡动画原理分析

CSS过渡时通过添加或删除相应的class来实现

显示

在动画即将执行的一瞬间（即第一个黑点的位置），为DOM添加上两个class；这一瞬间结束后会开始执行动画（红点位置），删除fade-enter类，再添加fade-enter-to类；一直到最后（第二个黑点位置），动画执行完毕，删除所有类

元素显示对应的类名：

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

消失

与显示被包裹的元素一样，在消失动画即将开始的一瞬间（即第一个黑点位置），为元素添加两个class样式；在动画执行的一瞬间（红点位置），删除fade-leave类，并添加fade-leave-to；当动画执行完毕后（第二个黑点），删除添加的类

消失时对应的类名：

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

CSS样式内容分析

opacity样式

CSS中的opacity属性设置元素的不透明级别

语法： opacity: value|inherit;

value:指定相应的不透明度，从0.0（完全透明） - 1.0（不透明）
inherit：opacity属性值从父元素继承

显示

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

分析：

通过改变元素的不透明度来实现，为了使元素显示，我们需要令opacity值从0到1
当从第二帧开始删除fade-enter类，opacity值即变为1
我们在fade-enter-active类中使用transition对opacity进行控制，使他三秒完成变换，即达到了渐入渐出的效果
当结束时fade-enter-to结束的类应该将opacity设置为1，由于默认值为1，故不再进行多余设置

消失

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

分析：

由于从显示到消失，初始状态时opacity值为1，即为默认值，故fade-leave不须多余设置
我们需要设置结束时的fade-leave-to的opacity值为0，即完全透明不显示
在fade-leave-active使用transition对opacity的变化进行控制，使他在三秒内完成

过渡动画修改后的代码

<style type="text/css">
	.fade-enter{
		opacity: 0; 
	}
	.fade-enter-active{
		transition:opacity 3s;
	}
	.fade-leave-to{
		opacity: 0;
	}
	.fade-leave-active{
		transition: opacity 3s;
	}
</style>

<div id="root">
	<transition name='fade'>
		<div v-if='show'>hello world</div>
	</transition>
	<button @click="handleClick">change</button>
</div>

<script type="text/javascript">
	var vm = new Vue({
		el:'#root',
		data:{
			show:true
		},
		methods:{
			handleClick:function(){
				this.show = ! this.show 
			}
		}
	})
</script>

Vue---CSS过渡动画原理