React 购物车小球动画

简介: 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;
相关文章
|
3月前
|
前端开发 Java API
【第49期】一文了解React动画
【第49期】一文了解React动画
72 0
|
3月前
|
前端开发
使用react实现一个简易的小球动画
使用react实现一个简易的小球动画
23 0
|
3月前
|
前端开发
React 拖动进入购物车
React 拖动进入购物车
314 0
|
4月前
|
前端开发
react函数组件购物车小球动画实现
react函数组件购物车小球动画实现
30 0
react函数组件购物车小球动画实现
|
6月前
|
前端开发
React-组件-原生动画 和 React-组件-性能优化
React-组件-原生动画 和 React-组件-性能优化
39 0
|
8月前
|
前端开发
react路由动画?
react路由动画?
|
移动开发 前端开发 JavaScript
ReactNative动画研究与实践
本次文章的题目为《ReactNative动画研究与实践》,既然叫研究,那我们就争取一次将RN动画相关的内容都说清楚,提出问题-论证问题-解决问题的方式来研究。RN动画之前在work上面写过一次,不过感觉写得不是很好,本次重新捋一次思路重写整理下分享给大家。 ### 问题 - ReactNative动画支持的怎么样? - ReactNative的动画使用起来方便吗? - ReactNat
4941 0
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
79 0
|
3月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
30 0
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
38 0