效果如下图
具体代码
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>
完成