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()函数了, 紧接着反而会变为立即执行