React 购物车小球动画

import React, { useRef } from 'react';

const ProductLayout = () => {
  const box = useRef(null);

  const createBall = (left, top) => {
    const ball = document.createElement('div');
    ball.style.position = 'absolute';
    ball.style.left = left - 10 + 'px';
    ball.style.top = top - 10 + 'px';
    ball.style.width = '20px';
    ball.style.height = '20px';
    ball.style.borderRadius = '50%';
    ball.style.backgroundColor = 'red';
    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 handleAddToCart = (e) => {
    const { clientX, clientY } = e;

    createBall(clientX, clientY);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div style={{ width: '100%', height: '100px', backgroundColor: '#f8f8f8', marginBottom: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <span style={{ fontSize: '2em' }}>商品标题</span>
      </div>
      <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ flexBasis: '50%', padding: '10px' }}>
          <img src="" alt="Product" style={{ width: '100%', height: 'auto' }} />
        </div>
        <div style={{ flexBasis: '50%', padding: '10px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <span style={{ fontWeight: 'bold' }}>商品价格：</span>
            <span>¥99.99</span>
          </div>
          <div>
            <span style={{ fontWeight: 'bold' }}>商品描述：</span>
            <span>这是一个商品的描述信息。</span>
          </div>
          <div>
            <button onClick={(e)=>handleAddToCart(e)} style={{ padding: '10px', borderRadius: '5px', backgroundColor: '#ff5000', color: 'white', border: 'none' }}>加入购物车</button>
          </div>
        </div>
      </div>
      <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ flexBasis: '50%', padding: '10px' }}>
          <img src="" alt="Product" style={{ width: '100%', height: 'auto' }} />
        </div>
        <div style={{ flexBasis: '50%', padding: '10px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <span style={{ fontWeight: 'bold' }}>商品价格：</span>
            <span>¥99.99</span>
          </div>
          <div>
            <span style={{ fontWeight: 'bold' }}>商品描述：</span>
            <span>这是一个商品的描述信息。</span>
          </div>
          <div>
            <button onClick={(e)=>handleAddToCart(e)} style={{ padding: '10px', borderRadius: '5px', backgroundColor: '#ff5000', color: 'white', border: 'none' }}>加入购物车</button>
          </div>
        </div>
      </div>
      <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ flexBasis: '50%', padding: '10px' }}>
          <img src="" alt="Product" style={{ width: '100%', height: 'auto' }} />
        </div>
        <div style={{ flexBasis: '50%', padding: '10px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <span style={{ fontWeight: 'bold' }}>商品价格：</span>
            <span>¥99.99</span>
          </div>
          <div>
            <span style={{ fontWeight: 'bold' }}>商品描述：</span>
            <span>这是一个商品的描述信息。</span>
          </div>
          <div>
            <button onClick={(e)=>handleAddToCart(e)} style={{ padding: '10px', borderRadius: '5px', backgroundColor: '#ff5000', color: 'white', border: 'none' }}>加入购物车</button>
          </div>
        </div>
      </div>
      <div style={{ width: '100%', height: '300px', backgroundColor: '#f8f8f8', marginTop: '10px' }}>
        <p style={{ padding: '10px' }}>商品详情</p>
      </div>
      <div ref={box} style={{ position: 'fixed', bottom: '2px' }}>
        购物车
      </div>
    </div>
  );
};

export default ProductLayout;