一、执行一个过渡动画

给一个div 一个button，点击这个按钮的时候让这个div实现渐进渐出

• 执行动画的标签要被transition包裹起来，这个动画的实现范围就在这个transition标签内

• 给这个transition一个name属性（自定义）（在下面代码中为dpn）

• 通过给transition标签内的div上面添加类来实现动画效果

动画执行分为两个过程
一个是显示——隐藏

这里用到了三个类
这里的fade（和dpn一样，是自定义trasition name属性的值）

从第一帧开始的时候，这两个类就在这个动画上面
fade-leave：
fade-leave-active：

第一帧之后**fade-leave* *这个类就就被删除掉增加了 fade-leave-to 这个类

一直到动画结束之后，剩下的两个类全部被移除

一个是隐藏——显示

同上理

/* 从隐藏到显示 */

• 一开始是隐藏，设置opacity为0 ，这个时候不透明度为0（就是透明）
• .dpn-enter-active这个类全程都会在， 所以给他添加一个transition属性，来监听opacity这个属性
• 当.dpn-enter这个类被移除的时候，opacity这个属性的值就变回了它的默认值 1 （就是不透明）
• 这个时候.dpn-enter-active就监听到了opacity这个属性的变化，就会给这个变化做一个动画，时间为后面设定的3s
• 所以在隐藏到显示的过程中就会由3s的渐变

.dpn-enter {
		opacity: 0;
}
..dpn-enter-to {
		
}
.dpn-enter-active {
		transition: opacity 2s,color 2s;
}
/*从显示到隐藏
与从隐藏到显示同理
*/

.dpn-leave {
		color: #00FFFF;
}
.dpn-leave-to {
		opacity: 0;
		color: orangered;
}
.dpn-leave-active {
		transition: color 3s,opacity 2s;
}

<div id="vm">
		<transition name="dpn">
			<div v-if="show">hello dpn</div>
		</transition>
		<button type="button" @click="fangfa">change</button>
</div>
		
<script type="text/javascript">
	var vm = new Vue({
		el: '#vm',
		methods: {
			fangfa: function() {
				this.show = !this.show
			}
		},
		data: {
			show: true
		}
	})
</script>