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文件中使用

元素部分

<template> <div className='xq-all'> <!-- //触发小球儿掉落按钮 --> <button className='xq-btn' @click="ev=>onchufa(ev)">点击触发</button> <div className='xq-bottom'> <!-- //小球掉落的位置 --> <p ref="refs">小球儿</p> </div> </div> </template>

逻辑部分

<script setup> import {ref} from 'vue' import Qiu from './qiu.js' //引入组件 const refs=ref() const onchufa=(ev)=>{ // const { clientX, clientY } = ev; Qiu(ev,refs.value) //在此时用组件中的方法 } </script>

样式部分

<style lang="less" scoped> .xq-all{ .xq-btn{ float: right; margin: 50px 0; } .xq-bottom{ height: 45px; line-height: 45px; width: 100vw; // background-color: bisque; position: fixed; bottom: 200px; left: 200px; p{ height: 40px; width: 40px; background-color: aquamarine; margin-left: 30px; font-size: 12px; position: fixed; } } } </style>

效果展示：

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