!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title script src="lib/vue-2.4.0.js"/script style .ball{ width: 15px; height: 15px; border-radius: 50%; background-color: red; } /style/headbody div id="app" input type="button"
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="lib/vue-2.4.0.js"></script> <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 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter"> <div class="ball" v-show="flag"></div> </transition> <!--<transition v-on:before-enter="beforeEnter"开始动画之前,起始位置 v-on:enter="enter" 动画进入 v-on:after-enter="afterEnter" 动画进入之后 v-on:enter-cancelled="enterCancelled" 进入取消 没怎么用到 v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled"> </transition>--> </div> <script> var vm=new Vue({ el:"#app", data:{ flag:false }, 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函数的引用 }, afterEnter(el){ this.flag=!this.flag console.log("ok") } } }) </script></body></html>