vue使用钩子函数制作动画

vue使用钩子函数制作简单动画效果，代码如下，仅供参考交流：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> -->
	<style>
		.ball{
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="app">
		<input type="button" value="快到碗里来" @click="flag=!flag">
		<transition 
			@before-enter="beforeEnter" 
			@enter="enter" 
			@after-enter="afterEnter">
			<div class="ball" v-show="flag"></div>
		</transition>
	</div>



	<script>
		//创建 Vue 实例，得到ViewModel
		var vm = new Vue({
			el: '#app',
			data: {
				flag: false
			},
			methods:{
				beforeEnter(el){
					el.style.transform = "translate(0, 0)"
					console.log(flag);
				},
				enter(el,done){
					el.offsetWidth
					el.style.transform = "translate(150px, 450px)"
					el.style.transition = "all 1s ease"

					done()
				},
				afterEnter(el){
					console.log('ok');
					this.flag = !this.flag
				}
			}
		})

	</script>
</body>
</html>

演示网站效果地址：http://hyc5.cn/cic.html