<style> .box{ width: 30px; height: 30px; border-radius: 50%; background: red; } </style> </head> <body> <div id="app"> <input type="button" value="加入购物车" @click="flag=!flag"> <!-- 使用元素把小球包裹起来 --> <!-- @before-enter 动画入场之前，此时还没有入场哈 @enter 表示动画的执行时候的状态 @after-enter 表示动画结束之后的状态 --> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="box" v-show="flag"></div> </transition> </div> <script> var vm=new Vue({ el:"#app", data:{ flag: false }, methods: { //动画钩子函数的第一个参数el 表示要执行的动画的那个DOM元素 是一个原生的BOM对象 // 大家可以认为 el 是通过 document.getElementById来获取的哦 beforeEnter(el){ //beforeEnte表示动画入场之前 此时动画还没有完全的开始 // 此时设置开始动画之前的起始样子 el.style.transform="translate(0,0)" }, enter(el,done){// enter表示动画开始之后的样子 el.offsetWidth //这一句话没有实际性的作用 但是如果不写 效果就出不来 // 你可以认为 el.offsetWidth 是让你看见动画的效果 el.style.transform="translate(150px,450px)" el.style.transition="all 1s ease" //这里的done 起始就是afterEnter这个函数， 也就是说done是afterEnter函数的引用 它就会自动调用下面这个函数 done() }, afterEnter(el){ // 动画完成之后 就会调用这个函数 this.flag=!this.flag //最终让这个小球消失 取反 让小球消失 } }, }) </script>
