1. 用transition包裹動畫元素, 添加動畫處理函數 ``` <transition @before-enter="beforeEnter" //進入動畫前 @enter="enter" //動畫開始之后的樣式，設置結束狀態 @after-enter="afterEnter"> //動畫完成之后的狀態 <div class="ball" v-show="isShow"></div> </transition ``` 2. 設置動畫處理函數 注意：動畫鉤子函數的第一個參數：el,表示 要執行動畫的那個DOM元素，是個原生的 JS DOM對象 大家可以認為，el是通過document.getElementById('') 方式獲取到的原生JS DOM對象 ``` beforeEnter(el){ // beforeEnter 表示動畫入場之前，此時，動畫尚未開始，可以在beforeEnter中，設置元素動畫之前的起始樣式 // 設置小球開始動畫之前的起始位置 el.style.transform = "translate(0, 0)" }, enter(el, done){ // 表示動畫開始之后的樣式，這里可以設置小球完成動畫之后的結束狀態 el.offsetWidth // 這句話，沒有實際的作用，但如果不寫，會不出來動畫效果 el.style.transform = "translate(150px, 450px)" el.style.transition = "all 1s ease" done() //這里的done其實就是afterEnter函數，也就是說done是afterEnter函數的引用 // 該bug已經修復，不需要done（） }, afterEnter(el){ this.isShow = !this.isShow; } ``` 3. 動態獲取小球和徽標的坐標差 ```js // 獲取小球在頁面中的位置 const ballPosition = this.$refs.ball.getBoundingClientRect(); // 獲取徽標的位置，這里用的是獲取dom的方法 const badgePosition = document .getElementsByClassName('van-info')[0] .getBoundingClientRect(); const xDist = badgePosition.left - ballPosition.left; const yDist = badgePosition.top - ballPosition.top; el.style.transform = `translate(${xDist}px, ${yDist}px)`; ``` **注意**: enter(el, done)中需要設置done()才能接著執行afterEnter函數已經修復，現在不需要后面緊接done()函數了, 緊接著反而會變為立即執行