vue的css动画过渡 ＜transition＞

//1. 需要添加动画效果的元素外层应使用<transition></transition>包裹
<transition name="fade">
	<div v-if="show">Hello world</div>
</transition>
<button @click="handleClick">点我</button>
....
handleClick(){
	this.show = !this.show
}

/* 2.然后写.fade-enter和.fade-enter-active的样式
* 在Vue中会在包裹了transition的元素添加过渡动画，并且在动画的第一帧.fade-enter和.fade-enter-active类。
* .fade-enter将opacity设置尾0。当动画运行到第二帧的时候，会将fade-enter类去掉。
* 这个时候opacity的值会恢复到默认值1。而这时候处于.fade-enter-active的transition，检测到了opacity的变化，并在3s内完成
*/
.fade-enter{
	opacity: 0;
}
.fade-enter-active{
	transition: opacity 3s;
}
/**
* 3. 原理同上，在元素隐藏的第一帧有一个 .fade-leave和.fade-leave-active, 
* 该样式的opacity的默认值为1。在动画的第二帧，会添加上.fade-leave-to的样式（同时第二帧会移除.fade-leave样式）。
* 这时候的样式opacity被设置为0。这时候.fade-leave-active中的transition检测到了opacity的变化，于是在3s内完成
*/
.fade-leave-to{
	opacity: 0
}
.fade-leave-active{
	transition: opacity 3s;
}

/**
* 4.也可以简写成这样。并且如果没有给transiton标签设置name的值
* 则相关样式均使用默认的v-enter, v-enter-active等。
*/
.fade-enter .fade-leave-to{
	opacity:0
}

参考：
Vue学习笔记5.1 CSS动画过渡。 .v-enter v-enter-active v-leaver-to v-leaver-active