4.實(shí)現(xiàn)點(diǎn)擊購(gòu)物車小球彈入效果:
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div class="ball" v-show="ball_show" ref="ball" ></div>
</transition>
data() {
return {
ball_show:false,
};
},
定義方法
beforeEnter(el){
el.style.transform = 'translate(0, 0)'
},
enter(el,done) {
const ball=this.$refs.ball.getBoundingClientRect();
const shopicon=document.getElementById("shopcar").getBoundingClientRect();
console.log(ball);
console.log(shopicon);
let top=shopicon.left-ball.left;
let bottom=shopicon.top-ball.top;
el.offsetWidth;
el.style.transform=`translate( ${top}px,${bottom}px )`;
el.style.transition='all 1s cubic-bezier(0,.73,.37,1)';
done();
},
afterEnter(el){
this.ball_show=!this.ball_show;
}
小球動(dòng)態(tài)效果實(shí)現(xiàn)后遇到一下問(wèn)題：
- 頁(yè)面下翻動(dòng)铃将，定位寫死導(dǎo)致定位不準(zhǔn)確
- 分辨率更換也會(huì)導(dǎo)致小球回不到預(yù)定位置
解決思路：
- 小球固定位置不能以px寫死
- 需要獲取動(dòng)態(tài)位置项鬼，求的 小球 和 預(yù)定位置（tabbar的icon）相對(duì)于屏幕的 left 和 top 值 ，計(jì)算得到動(dòng)態(tài)位移位置
- 使用
boject.getBoundingClientReact()獲取一個(gè)包含小球 的 left 和 top 的對(duì)象劲阎，預(yù)定終點(diǎn)位置獲取方法同理
enter(el,done) {
const ball=this.$refs.ball.getBoundingClientRect();
const shopicon=document.getElementById("shopcar").getBoundingClientRect();
console.log(ball);
console.log(shopicon);
let top=shopicon.left-ball.left;
let bottom=shopicon.top-ball.top;
el.offsetWidth;
el.style.transform=`translate( ${top}px,${bottom}px )`;
el.style.transition='all 1s cubic-bezier(0,.73,.37,1)';
done();
},
注意：
- vue 是不建議操作dom 的绘盟，但是為了快速解決問(wèn)題可以少量使用達(dá)到事半功倍
- jq 的規(guī)則，凡是頁(yè)面可見(jiàn)的元素都可以用 id 取 dom 哪工，子組件內(nèi)容也可以根據(jù)ID跨頁(yè)面直接獲取奥此，這里
shopcar是vue頁(yè)面 tabbar 的 icon
下面附上計(jì)算原理：
小球定位2.png
小球定位.png
