<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style> #ball { width: 20px; height: 20px; border-radius: 50%; background: pink; ... ...
<!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>
