Responsive页面适配购物车小球抛物线

底部购物车组件代码：（原生）

import React, { memo } from 'react'
import styles from './index.less'
export default memo(function Shop() {
    return (
        <div id='shops' style={{ background: 'black', borderRadius: '120px', width: '90%', position: 'absolute', marginTop: '500px' }}>
            <div className={styles.icon} style={{ position: 'relative', left: '30px', fontSize: '25px', display: 'flex', color: 'azure' }}>
                <svg t="1681284347235" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10933" width="128" height="128"><path d="M510.293 59.733C261.12 59.733 58.027 262.827 58.027 512s201.386 450.56 450.56 450.56c249.173 0 450.56-201.387 450.56-450.56 1.706-249.173-199.68-452.267-448.854-452.267z m-102.4 752.64c-32.426 0-59.733-25.6-59.733-58.026 0-30.72 27.307-58.027 56.32-58.027 34.133 0 61.44 25.6 61.44 58.027 1.707 32.426-25.6 58.026-58.027 58.026z m266.24 3.414c-27.306 1.706-61.44-29.014-59.733-58.027 1.707-34.133 23.893-59.733 58.027-59.733s61.44 25.6 61.44 58.026c1.706 30.72-27.307 59.734-59.734 59.734z m150.187-430.08c-6.827 22.186-15.36 44.373-22.187 66.56l-25.6 76.8c-8.533 23.893-25.6 37.546-51.2 37.546H390.827c3.413 18.774 6.826 35.84 8.533 52.907 0 5.12 3.413 5.12 8.533 5.12H716.8c6.827 0 11.947 0 18.773 1.707 8.534 1.706 15.36 8.533 17.067 17.066 3.413 18.774-5.12 37.547-29.013 37.547H394.24c-29.013 0-44.373-17.067-49.493-42.667-10.24-40.96-17.067-80.213-25.6-121.173-11.947-63.147-23.894-124.587-35.84-187.733 0-3.414-1.707-5.12-1.707-8.534h-44.373c-25.6 1.707-46.08-29.013-34.134-56.32 5.12-10.24 13.654-15.36 25.6-17.066h71.68c20.48 0 30.72 8.533 35.84 29.013 3.414 10.24 3.414 22.187 5.12 34.133 1.707 10.24 1.707 20.48 3.414 30.72h442.026c11.947 0 22.187 1.707 30.72 8.534s11.947 18.773 6.827 35.84z" fill="#bfbfbf" p-id="10934"></path></svg>
                <div className={styles.icon_content} style={{ width: '60%', marginTop: '8%' }}>
                    <span>￥0</span>
                    预估另需配送费￥2.5
                    <span>￥20起送</span>
                </div>

            </div>

        </div>
    )
})

小球抛物线效果JS代码（只对于Responsive适配）：

import React, { Component, createRef } from 'react'
import Shop from '../Shop/index'
 

export default class Addcart extends Component {
  constructor(props) {
    super(props)
    this.state = {
      //商品名
      arr: ['商品1', '商品2','商品3','商品4'],
      // 初始值
      num: 0
    }
  }
  // 获取收藏盒子
  collect = createRef()
  Getcollect = () => this.collect.current 
  nums = 0
  // 给每个span绑定点击事件
  Fnstart(e) {
    this.nums++
    // 获取当前span的x和y的值
    let x = e.changedTouches[0].clientX
    let y = e.changedTouches[0].clientY
    // 点击一次让state中的num+1
    this.setState({
      num: this.nums
    })
    // 调用函数把x和y当参数传过去
    this.createBall(x, y)
    // 判断收藏的数量不为0的时候让收藏盒子显示
    if (this.nums != 0) {
      this.Getcollect().style.opacity = '1'
    }
  }
  Fnstartj(e) {
    this.nums--
    // 获取当前span的x和y的值
    let x = e.changedTouches[0].clientX
    let y = e.changedTouches[0].clientY
    // 点击一次让state中的num+1
    this.setState({
      num: this.nums
    })
    // 调用函数把x和y当参数传过去
    this.createBall(x, y)
    // 判断收藏的数量不为0的时候让收藏盒子显示
    if (this.nums != 0) {
      this.Getcollect().style.opacity = '1'
    }
  }
  // 创建小球添加动画
  createBall(left, top) {
    // 创建div元素
    let Ball = document.createElement('div')
    // 给div定位
    Ball.style.position = "absolute";
    // div的left和span的left是一样的
    Ball.style.left = left + 'px'
    // div的top和span的top是一样的
    Ball.style.top = top + '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);
    // 添加动画属性
    setTimeout(() => {
      Ball.style.left = this.Getcollect().offsetLeft + this.Getcollect().offsetWidth / 2 - 650 + "px";
      Ball.style.top = this.Getcollect().offsetTop + 450 + "px";
    }, 0);
    //动画结束后，删除自己
    // ontransitionend事件 是在 transition过度完之后执行的 
    Ball.ontransitionend = function () {
      Ball.remove();
    };
  }
  render() {
    return (
      <div className='Addcart'>
        <div className='box' style={{float:'right'}}>
          {this.state.arr.map((item, index) => (
            <div className='div' key={index}>
              <span onTouchStart={this.Fnstartj.bind(this)}>-</span>
              {item}
              <span onTouchStart={this.Fnstart.bind(this)}>+</span>
            </div>
          ))}
          <div className='collect' ref={this.collect}>
            <span>数量</span> : {this.state.num}
          </div>
        </div>
        <Shop/>
      </div>
    )
  }
}

#inner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: blue;
    margin-left: 100px;
    margin-top: 100px;
    transition: 0.5s all cubic-bezier(0.14, -1.33, 1, 0.18);
}