vue钩子函数

使用钩子函数模拟小球动画运动

.ball{
				width: 15px;
				height: 15px;
				background-color: #FF0000;
				border-radius: 50%;
			}

<div id="app">
			<input type="button" value="快到碗里来" @click="flag=!flag">
			<transition
			@before-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter">
			      //加ball的样式
				<div class="ball" v-show="flag"></div>
			</transition>
</div>

var vm = new Vue({
				el:'#app',
				data:{
					flag:false
				},
				//动画钩子函数的第一个参数：el，表示要执行动画的那个DOM元素，是个原生的js DOM对象；
				methods:{
					beforeEnter(el){
						el.style.transform = "translate(0,0)"
					},
					enter(el,done){
						el.offsetWidth
						el.style.transform = "translate(150px,450px)"
						el.style.transition = 'all 1s ease'
						
						done()
					},
					afterEnter(el){
						
						this.flag = !this.flag
					}
				}
			})