Vue中css动画原理-

<style>
	.fade-enter,
	.fade-leave-to 	{
		opacity: 0;
	}
	.fade-enter-active,
	.fade-leave-active	{
		transition: opacity 1s;
	}
</style>

<div id="root">
	<transition name='fade'>
		<div v-if='show'>Hello World</div>
	</transition>
	<button @click="handleClick">切换</button>
</div>

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

Animate.css库的使用

在Vue中使用Animate.css库的使用,
Vue中使用keyframe
// 下载文件，引入css文件
<link rel="stylesheet" type="text/css" href="./animate.css">
<style>
@keyframes bounce-in {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(1.5);
	}
	100% {
		transform: scale(1);
	}
}
.fade-enter-active {
	transform-origin: left center;
	animation: bounce-in 1s;
}	
.fade-leave-active {
	transform-origin: left center;
	animation: bounce-in 1s reverse;
}	
</style>

// 也可以自定义动画的class的名字。
<transition 
	enter-active-class='active'
	leave-active-class='leave'
>

<transition 
	name='fade'
	enter-active-class='animated swing'
	leave-active-class='animated shake'
>