react封装实现点击加入购物车小球动画

let createBall = (left, top,box) => {// 点击事件 const {clientX,clienty} = ev  createBall(clientX,clienty ,ref)  //  ref 是 react 给购物车定义的 ref 名称
    const ball = document.createElement('div');
    ball.style.position = 'absolute';
    ball.style.left = left - 2+ 'px';
    ball.style.top = top - 5 + 'px';
    ball.style.width = '20px';
    ball.style.height = '20px';
    ball.style.borderRadius = '50%';
    ball.style.backgroundColor = 'green';
    ball.style.transition = 'left .6s linear, top .6s cubic-bezier(0.5,-0.5,1,1)';
    document.body.appendChild(ball);
    // 使用 requestAnimationFrame 替代 setTimeout
    requestAnimationFrame(() => {
        ball.style.left = box.current.offsetLeft + box.current.offsetWidth / 2 + 'px';
        ball.style.top = box.current.offsetTop + 'px';
    });
    ball.ontransitionend = function () {
        ball.remove();
    };
}

//传入两个参数分别为：当前点击的元素、和小球飞入到盒子的元素
const Add = (e, Box) => {// e 是点击加入购物车的 事件 的 ev ， Box 是 react 给购物车定义的 ref 名称
    let x = e.clientX
    let y = e.clientY
    createBall(x, y, Box)
}

export default Add