22 Vue 中使用组件封闭动画效果，以后只需要使用组件就可以看到效果了

本文链接：https://blog.csdn.net/davice_li/article/details/127546791

一、 Vue 中使用组件封闭动画效果，以后只需要使用组件就可以看到效果了

简直太棒了，再也不用每个都写了。只调用组件就可以了

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中组件中的动画封装</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- 把动画和样式全部封闭到组件中 是需要引用组件就可以实现动画-->
			<child :show="show">
				<h1>Hello World</h1>
			</child>
			<button @click="handleBtnClick">提交</button>
		</div>

		<script type="text/javascript">
        //动画组件的封装
			Vue.component('child',{
				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)
					}
				}
			})
			var vm = new Vue({
				el: "#app",
				data:{
					show :false
				},
				methods:{
					handleBtnClick:function() {
						this.show = !this.show
					}
				}
			})
		</script>

	</body>
</html>