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

	
		
Hello World
	
	toggle


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 中多个元素或组件的过渡

	// 如果transition不设置name，默认是v。
	
		
Hello World
		
Bye World
	
	toggle

data: {
	show: true
}, 
methods: {
	handleClick: function() {
		this.show = !this.show
	},
}

----------------动态组件------------

	// 如果transition不设置name，默认是v。
	
		Hello World
	
	toggle


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

列表过渡动画。transition-group

	// 如果transition不设置name，默认是v。
	
		

		  {item.title}
		
	
	Add Item

 动画的封装

	
hello world



	
hello world