react美团点餐项目实现购物车小球动画

效果如下图

具体代码

        1.在项目中引入parabola.js

let createBall = (left, top, Box) => {
    //创建小球元素
    let Ball = document.createElement('div')
    //设置小球的样式
    Ball.style.position = 'absolute'
    Ball.style.left = left + 'px'
    Ball.style.top = top + 'px'
    Ball.style.width = '20px'
    Ball.style.height = '20px'
    Ball.style.borderRadius = '50%'
    Ball.style.backgroundColor = '#FFAA33'
    //贝塞尔曲线
    //小球动画曲线
    Ball.style.transition = "left .6s linear, top .6s cubic-bezier(0.5,-0.5,1,1)"
    //最终小球设置完毕后添加到DOM元素中
    document.body.appendChild(Ball)
    //添加动画样式属性
    setTimeout(() => {
        Ball.style.left = Box.offsetLeft + Box.offsetWidth / 2 + "px"
        Ball.style.top = Box.offsetTop + "px"
    }, 0)
    //动画结束后，删除自己
    //ontransitionend事件，是在transition过度完之后执行的
    Ball.ontransitionend = function () {
        Ball.remove()
    }
}

//传入两个参数分别为：当前点击的元素、和小球飞入到盒子的元素
const Add = (e, Box) => {
    let x = e.clientX
    let y = e.clientY
    createBall(x, y, Box)
}

export default Add

2.导入parabola.js

import parabola from '../parabola.js'

3.定义divRef用于获取节点

const divRef=useRef()

4.在要点击的按钮中写入点击事件，获取点击的位置

<div style={{ marginRight: '1px', marginTop: '60px' }}>
                    {text.num == 0 ? <button onClick={(e) => {
                      upda(text._id, text.num + 1);
                      parabola(e,divRef.current)
                      console.log(e,'-----------');
                    }}>+</button> : <Stepper
                      defaultValue={text.num}
                      onFocus={(e) => parabola(e, divRef.current)}
                      onChange={(value,e) => {
                        upda(text._id, value)
                        console.log(text._id, value);
                      }}
                    />}
                  </div>

5.在要接收小球的位置绑定ref即可实现小球效果

<div ref={divRef} style={{display:'flex'}}>
      <SubmitBar
          price={TotalPrice * 100}
          disabled={false}
          buttonText="去结算"
        >
      
          <Badge content={TotalNum}>
            <ShoppingCart onClick={() => setState('bottom')} />
          </Badge>
        </SubmitBar>
      </div>

完成