vue实现小球掉落

首先，将小球儿动画代码封装成组件，创建个文件，例如qiu.js

let createBall = (left, top,box) => {
    // 点击事件 const {clientX,clienty} = ev  createBall(clientX,clienty)
    const ball = document.createElement('div');
    ball.style.position = 'absolute';
    ball.style.left = left - 2+ 'px';
    ball.style.top = top - 5 + 'px';
    ball.style.width = '10px';
    ball.style.height = '10px';
    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.getBoundingClientRect().left + box.offsetWidth / 2 + 'px';
        ball.style.top = box.getBoundingClientRect().top + 'px';
    });
    ball.ontransitionend = function () {
        ball.remove();
    };
}
 
//传入两个参数分别为：当前点击的元素、和小球飞入到盒子的元素
const Qiu = (e, Box) => {
    const { clientX, clientY } = e;
    createBall(clientX, clientY, Box)
}
 
export default Qiu;  //导出

接下来就是引入js文件，在使用的vue文件中使用

元素部分

逻辑部分

样式部分

效果展示：

*************