vue实现小球掉落-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>

效果展示：

*************文章来源地址https://www.toymoban.com/news/detail-800200.html

到了这里，关于vue实现小球掉落的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！