动画

一、使用过渡类名实现动画
1.1 HTML结构

<div id="app">
	<input type="button" value="toggle" @click="flag=!flag"/>
     <!--使用transition把要做动画的元素包裹起来-->
	<transition>
		<h3 v-if="flag" v-color="'red'">{{msg}}</h3>
	</transition>
</div>

1.2 VM实例

var vm=new Vue({
	el:'#app',
	data:{
		msg:'我是一个屁',
		flag:false
	},
	directives:{
		color:{
			bind(el,binding){
				el.style.color=binding.value
			}
		}
	}				
});

1.3 定义两组类样式

<style type="text/css">
	.v-enter,
	.v-leave-to{
		opacity: 0;
		transform: translateX(100px) translateY(100px);
	}
	.v-enter-active,
	.v-leave-active{
		transition: all 1s ease; 
	}
</style>

二、自定义过渡类名实现动画

如果你使用了 ，那么 v-enter 会替换为 my-transition-enter
如：

<transition name="my">
	<h6 v-if="flag2">我是一个h6</h3>
</transition>

此时HTML样式为：

<style type="text/css">
	.my-enter,
	.my-leave-to{
		opacity: 0;
		transform: translateX(100px) translateY(100px);
	}
	.my-enter-active,
	.my-leave-active{
		transition: all 1s ease; 
	}
</style>

三、使用第三方库animate.css实现动画

<!--使用transition把要做动画的元素包裹起来，注意使用外部animate库的时候，要加上animated这个类-->
<!--<transition enter-active-class="wobble" leave-active-class="zoomOut" >
	<h3 v-if="flag" class="animated">{{msg}}</h3>
</transition>-->
			
<!--使用 :duration 来统一设置入场时间和离场时间-->
<!--<transition enter-active-class="wobble" leave-active-class="zoomOut" :duration='200'>
	<h3 v-if="flag" class="animated">{{msg}}</h3>
</transition>-->
			
<!--也可以使用：duration="{enter:毫秒数,leave:毫秒数}" 来分别设置入场离场时间-->
<transition enter-active-class="wobble" leave-active-class="zoomOut" :duration="{enter:200,leave:800}">
	<h3 v-if="flag" class="animated">{{msg}}</h3>
</transition>

四、列表动画 transition-group

<ul>
	<!--在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，
    不能使用transition包裹，需要使用transition-group包裹-->
	<!--如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置  :key 属性-->

	<transition-group>
		<li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}}-----{{item.name}}</li>
	</transition-group>
</ul>

在样式中：

/*下面的 .v-move 和 v-leave-active 配合使用，能够实现类别后续的元素逐渐飘上来，
   而不会显得卡顿 的效果*/


.v-move{
	transition: all 1s ease;
}
.v-leave-active{
	position: absolute;
}

关于transition-group 属性的问题：

• appear属性：实现页面刚展示出来时候的效果，是飘上来的，而不是直接出来
• tag属性：设置tag属性，指定transition-group 渲染为指定元素，如果不指定，默认为span标签
  如：
  4.1、没有设置tag属性：默认渲染为span标签

<ul>
	<!--在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用transition包裹，
	需要使用transition-group包裹-->
	<!--如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置  :key 属性-->
	<transition-group appear>
		<li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{item.id}}-----{{item.name}}</li>
	</transition-group>
</ul>

效果为：

4.2、设置了tag 属性为 ul标签后：