4.实现点击购物车小球弹入效果:
<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;
}
小球动态效果实现后遇到一下问题：
- 页面下翻动，定位写死导致定位不准确
- 分辨率更换也会导致小球回不到预定位置
解决思路：
- 小球固定位置不能以px写死
- 需要获取动态位置，求的 小球 和 预定位置（tabbar的icon）相对于屏幕的 left 和 top 值 ，计算得到动态位移位置
- 使用
boject.getBoundingClientReact()获取一个包含小球 的 left 和 top 的对象，预定终点位置获取方法同理
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 的，但是为了快速解决问题可以少量使用达到事半功倍
- jq 的规则，凡是页面可见的元素都可以用 id 取 dom ，子组件内容也可以根据ID跨页面直接获取，这里
shopcar是vue页面 tabbar 的 icon
下面附上计算原理：
小球定位2.png
小球定位.png
