react封装实现点击加入购物车小球动画_react实现添加购物车小球-优快云博客

本文链接：https://blog.youkuaiyun.com/MSanXun/article/details/134341141

本文介绍了如何在React中创建一个动态点击事件，通过`createElement`和`ref`实现一个小球跟随鼠标移动并最终进入购物车盒内的动画效果，使用了`requestAnimationFrame`优化动画性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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