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

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

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)`;

 

你可能感兴趣的:(添加购物车之小球半场动画的实现)