Tabbar 的购物车中呢?同样的方法,我们通过
getBoundingClientRect 方法来确定底部Tabbar的购物车徽标的
left 和
top 值,获取到这个值后,就让小球在当前位置,以贝塞尔曲线的方式向购物车x和y的方向移动,当移动完成后将数组
showMoveDot 的属性设置为
false 且透明度为1.
在小球绘制完成后的方法中
afterEnter (el) {
// 获取底部购物车徽标
const badgePosition = document
.getElementById("buycar")
.getBoundingClientRect();
// 设置小球移动的位移
el.style.transform = `translate3d(${badgePosition.left + 30}px,${badgePosition.top - 30}px,0)`
// 增加贝塞尔曲线
el.style.transition = 'transform .88s cubic-bezier(0.3, -0.25, 0.7, -0.15)';
el.style.transition = 'transform .88s linear';
this.showMoveDot = this.showMoveDot.map(item => false);
// 设置透明度
el.style.opacity = 1;
}
此时大功告成!点击添加购物车按钮,小球可以曲线飞到购物车中了,来个Gif图炫耀下✿✿ヽ(°▽°)ノ✿
掘友请留步(╥╯^╰╥)你以为这样就算完成了嘛~对于Geek:monkey_face:来说,这样的效果,简直太Low啦,于是乎,咱们继续一起来做个优化吧~
阶段三 体验优化
优化一:把小球变成点击当前商品的图片
刚开始还真TM把我给难住了,这么多图片,鬼知道显示哪个呢?后来灵机一动,不就是个动态加载图片嘛,点击加入购物车的时候当前的商品对象已经拿到了,你怕啥,直接取就完啦!~so easy:smile:好,思路有了,那咱就上代码!
1.在data中追加个
dropImage 属性.
data () {
return {
showMoveDot: [], //控制下落的小圆点显示隐藏
elLeft: 0, //当前点击购物车按钮在网页中的绝对top值
elTop: 0, //当前点击购物车按钮在网页中的绝对left值
dropImage: '' // 小球图片
}
2.在Dom中通过动态绑定的方式来获取
dropImage
<transition appear
@after-appear='afterEnter'
@before-appear="beforeEnter"
v-for="(item,index) in showMoveDot"
