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

原创已于 2023-11-10 21:12:22 修改 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2023-11-10 21:07:06 首次发布

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

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