添加购物车之小球半场动画的实现

Posted 2021-03-12 zhaohui-116

 问题：不同分辨率下小球移动至购物车徽标
 解决：不能把位置横纵坐标写死，根据不同情况动态计算这个坐标值
      先得到徽标的横纵坐标再得到小球的横纵坐标，然后横坐标值求差，纵坐标值求差，结果就是要移动的距离

Vue 中不推荐操作DOM元素，解决不了稍微写一点还可以。

小球横纵坐标：

            const ballLeft = document.getElementById(‘ball‘).getBoundingClientRect().left;
            const ballTop = document.getElementById(‘ball‘).getBoundingClientRect().top;
            // console.log(ballLeft)
            // console.log(ballTop)

   徽标横纵坐标：

            const shopCarLeft = document.getElementById(‘shopCar‘).getBoundingClientRect().left;
            const shopCarTop = document.getElementById(‘shopCar‘).getBoundingClientRect().top;
            // console.log(shopCarLeft)
            // console.log(shopCarTop)

求差值，差值就是小球要移动的坐标距离

            const X = shopCarLeft - ballLeft;
            const Y = shopCarTop - ballTop;
            // console.log(X,Y)

最后，使用模板字符串

el.style.transform = `translate(${X}px,${Y}px)`;