动画封装

<div id="app">
		<button @click="toggle">toggle</button>
		<child :show="isShow">
			<div class="demo">hello world</div>
		</child>	
		<child :show="isShow">
			<h1 class="demo">hello world</h1>
		</child>	
	</div>
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		Vue.component("child", {
			props: ["show"],
			template: `
				<transition @before-enter="beforeEnter" @enter="handleEnter">
					<slot v-if="show"></slot>
				</transition>
			`,
			data: function() {
				return {

				}
			},
			methods: {
				beforeEnter: function(el) {
					el.style.color =" red";
				},
				handleEnter: function(el, done) {
					setTimeout(() => {
						el.style.color =" green";
						done();
					}, 4000);
					
				}
			}

		})
		
		var app = new Vue({
			el: "#app",
			data: {
				isShow: true
			},
			methods: {
				toggle: function(){
					this.isShow = !this.isShow;
				}

				}
			
		})