let createBall = (left, top,box) => {// 点击事件 const {clientX,clienty} = ev createBall(clientX,clienty ,ref) // ref 是 react 给购物车定义的 ref 名称
const ball = document.createElement('div');
ball.style.position = 'absolute';
ball.style.left = left - 2+ 'px';
ball.style.top = top - 5 + 'px';
ball.style.width = '20px';
ball.style.height = '20px';
ball.style.borderRadius = '50%';
ball.style.backgroundColor = 'green';
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 Add = (e, Box) => {// e 是点击加入购物车的 事件 的 ev , Box 是 react 给购物车定义的 ref 名称
let x = e.clientX
let y = e.clientY
createBall(x, y, Box)
}
export default Add
react封装实现点击加入购物车小球动画
于 2023-11-10 21:07:06 首次发布