版权声明：仅供个人学习使用，如有雷同，纯属巧合。 https://blog.csdn.net/erdfty/article/details/88680509
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