<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .ball{ width: 20px; height: 20px; background-color: red; border-radius: 50%; } </style> </head> <body> <div id="app"> <button type="button" @click="flag=!flag">半程动画</button> <!-- 绑定动画的钩子函数 before-enter进入动画前 enter 进入动画 after-enter 进入动画后 --> <transition @before-enter="beEnter" @enter="enter" @after-enter="afEnter"> <div v-if="flag" class="ball"> </div> </transition> </div> <script type="text/javascript"> var vm=new Vue({ el:‘#app‘, data:{ flag:false }, methods:{ /* el:表示要执行的dom元素 */ beEnter(el){//动画还未开始【起始位置】 el.style.transform = "translate(0, 0)" }, enter(el,done){ el.offsetHeight//写这个才会有动画 el.style.transform = "translate(150px, 450px)" el.style.transition = ‘all 1s ease‘; // 相当于done 是 afterEnter 函数的引用 done(); }, afEnter(el){ this.flag=!this.flag } } }) </script> </body> </html>
原文：https://www.cnblogs.com/shangrao/p/13027249.html