Vue，使用js的钩子函数实现动画（enter，leave）

<div>
	<transition name="fade"
		@enter="handleEnter"
		@before-enter="handleBeforeEnter"
		@after-enter="handleAfterEnter"
		
		>
		<div v-show="show">Hello World</div>
	</transition>
	<button @click="handleClick">toggle</button>
</div>

methods: {
	handleClick: function() {
		this.show = !this.show
	},
	handleBeforeEnter: function(el) {
		el.style.color = 'red'
	},
	handleEnter: function(el, done) {
		setTimeout(()=> {
			el.style.color= "yellow"
			done()
		}, 2000)
	},
	handleAfterEnter: function(el){
		el.style.color = 'black'
	}
}

 Vue 中多个元素或组件的过渡

<style>
	v.enter, v-leave-to {
		opacity: 0;
	}
	.v-enter-active, .v-leave-active {
		transition: opacity 1s;
	}
</style>
<div>
	// 如果transition不设置name，默认是v。
	<transition name="fade" mode="out-in">
		<div v-if"show">Hello World</div>
		<div v-else="show">Bye World</div>
	</transition>
	<button @click="handleClick">toggle</button>
</div>
data: {
	show: true
}, 
methods: {
	handleClick: function() {
		this.show = !this.show
	},
}

----------------动态组件------------
<div>
	// 如果transition不设置name，默认是v。
	<transition name="fade" mode="out-in">
		<component :is='type'>Hello World</component>
	</transition>
	<button @click="handleClick">toggle</button>
</div>

Vue.component('child', {
	template: '<div>child</div>'
})
Vue.component('child-one', {
	template: '<div>child-one</div>'
})
var vm = new Vue({
	el:'#root',
	data: {
		type: 'child'
	},
	methods: {
		handleClick: function(){
			this.type = this.type==='child'? 'child-one' : 'child'
		}
	}
})

列表过渡动画。transition-group

<style>
	.v-enter, .v-leave-to {
		opacity: 0;
	}
	.v-enter-active, .v-leave-active {
		transition: opacity 1s;
	}
</style>
<div>
	// 如果transition不设置name，默认是v。
	<transition-group>
		<div v-for="item of list" :key="item.id">
		  {item.title}
		</div>
	</transition-group>
	<button @click="handleAddClick">Add Item</button>
</div>

 动画的封装

<fade :show='show'>
	<div>hello world<div>
</fade>
<fade :show='show'>
	<h1>hello world<h1>
</fade>

<script>
	Vue.component('fade', {
		props:['show'],
		template: `
			<transition 
				@before-enter="handleBeforeEnter"
				@enter="handleEnter"	
				
			>
				<slot v-if="show"><slot>
			</transition>
		`,
		methods: {
			handleBeforeEnter: function(el) {
				el.style.color='red';
			},
			handleEnter: function(el, done) {
				setTimeout(()=> {
					el.style.color = 'green'
					done()
				}, 2000)
			}
		}
	})
</script>