<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style> #ball { width: 20px; height: 20px; border-radius: 50%; background: pink; } </style> </head> <!-- vue动画的js钩子函数相当于动画的生命周期函数 。before-enter:进入之前触发 。after-enter：进入后触发 。enter-cancelled：结束进入阶段 。before-leave:进入之前触发 。after-leave：进入后触发 。leave-cancelled：结束进入阶段 --> <!-- 本例子只需进入阶段的动画效果 --> <body> <div id="app"> <input type="button" value="点我" @click="flag=!flag"> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div id="ball" v-show="flag"></div> </transition> </div> </body> <script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: {//初始小球不显示 flag: false }, methods: { // el 即操作的元素对象 beforeEnter(el) { el.style.transform='translate(0,0)';//初始小球位置 }, enter(el){ //必须加下面一行，否则不会出现应有的效果 el.offsetWidth;//这里可以理解成强制浏览器刷新，也可以写el.offsetHeight el.style.transition='all 1.5s ease'; el.style.transform='translate(150px,250px)'; }, afterEnter(el){ console.log('ok'); this.flag=false;//隐藏小球 } } }); </script> </html>