Vue使用过渡类名实现动画

步骤：
1.使用transition元素，把需要被动画控制的元素包裹起来
2. 自定义两组样式，来控制 transition 内部的元素实现动画

样式表内代码

		/* .v-enter,是一个时间点,是进入之前,元素的起始状态,此时还没有开始进入 */
		/* .v-leave-to 是一个时间点,是动画离开后,离开的终止状态,此时元素动画已经结束 */
		.v-enter,
		.v-leave-to{
			opacity: 0;
			transform: translateX(80px);
		}
		/* .v-enter-active  入场动画的时间段 */
		/* .v-leave-active  离场动画的时间段 */
		.v-enter-active,
		.v-leave-active{
			transition: all 0.4s ease;
		}

HTML代码

	<div id="app">
		<input type="button" name="" id="" value="切换" @click="flag=!flag"/>
		<!-- 1.使用transition元素，把需要被动画控制的元素包裹起来 -->
		<transition>
			<h3 v-if="flag">123123</h3>
		</transition>
	<div>			

JS代码

		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					flag:true
				},
				methods:{}
			})
		</script>

假如有两种动画效果如何区分

1.给 transition 添加一个 name ，通过 transition 的 name 属性来区分

<input type="button" name="" id="" value="切换2" @click="flag2=!flag2"/>
			<!-- 1.使用transition元素，把需要被动画控制的元素包裹起来 -->
			<transition name="my">
				<h3 v-if="flag2">123123</h3>
			</transition>

2.把 v- 前缀改为我们自定义的 name 名即可实现不同的动画效果

		/* .v-enter,是一个时间点,是进入之前,元素的起始状态,此时还没有开始进入 */
		/* .v-leave-to 是一个时间点,是动画离开后,离开的终止状态,此时元素动画已经结束 */
		.my-enter,
		.my-leave-to{
			opacity: 0;
			transform: translateY(80px);
		}
		/* .v-enter-active  入场动画的时间段 */
		/* .v-leave-active  离场动画的时间段 */
		
		.my-enter-active,
		.my-leave-active{
			transition: all 0.8s ease;
		}

<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					flag2:true
				},
				methods:{}
			})
		</script>