Vue.js小球抛物线懒人代码

最新推荐文章于 2024-06-15 16:56:58 发布

郭德峰

最新推荐文章于 2024-06-15 16:56:58 发布

阅读量115

点赞数

文章标签：前端 vue.js typescript

本文链接：https://blog.csdn.net/m0_60584958/article/details/124245601

版权

这篇博客详细介绍了如何在Vue.js中实现一个点击事件触发的小球抛物动画。通过定义`@click`事件和使用`Vue`的过渡组件，结合CSS动画，实现了购物车小球从元素位置下落的效果。文章涵盖了从数据结构、事件处理到动画执行的整个过程，是前端开发中关于动效和Vue交互的一个实例。

摘要由CSDN通过智能技术生成

<template>
<div>
  <div>你的内容部分
 <!-- 定义你的点击事件 -->
 <div class="box" @click="addClick"></div>
//这里的点击事件加给你要触发抛物的元素
 </div>
  <!-- 小球代码部分 -->
    <div v-for="(ball, index) in balls" :key="index">
        <transition  name="drop"  @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop" >
          <div class="ball" v-show="ball.show">
            <div class="inner inner-hook"></div>
          </div>
        </transition>
      </div>
<!-- 小球代码部分 -->
</div>
</template>

<script>
export default {
    data(){
      return {
             //小球代码
             balls: [
                 //小球 设为3个
                 {
                 show: false,
                 },
             ],
             dropBalls: [],
        }
    }，
        methods:{
          additem(event) {
      this.drop(event.target);
      this.TakeOutQuantity++;
    },
    drop(el) {
      //抛物
      for (let i = 0; i < this.balls.length; i++) {
        let ball = this.balls[i];
        if (!ball.show) {
          ball.show = true;
          ball.el = el;
          this.dropBalls.push(ball);
          return;
        }
      }
    },
    beforeDrop(el) {
      /* 购物车小球动画实现 */
      let TakeOutQuantity = this.balls.length;
      while (TakeOutQuantity--) {
        let ball = this.balls[TakeOutQuantity];
        if (ball.show) {
          let rect = ball.el.getBoundingClientRect(); //元素相对于视口的位置
          let x = rect.left - 32; //x初始值
          let y = -(window.innerHeight - rect.top - 22); //获取y
          el.style.display = "";
          el.style.webkitTransform = "translateY(" + y + "px)"; //translateY
          el.style.transform = "translateY(" + y + "px)";
          let inner = el.getElementsByClassName("inner-hook")[0];
          inner.style.webkitTransform = "translateX(" + x + "px)";
          inner.style.transform = "translateX(" + x + "px)";
        }
      }
    },
    dropping(el, done) {
      /*重置小球数量 样式重置*/
      el.offsetHeight;
      el.style.webkitTransform = "translate3d(0,0,0)";
      el.style.transform = "translate3d(0,0,0)";
      let inner = el.getElementsByClassName("inner-hook")[0];
      inner.style.webkitTransform = "translate3d(0,0,0)";
      inner.style.transform = "translate3d(0,0,0)";
      el.addEventListener("transitionend", done);
    },
    afterDrop(el) {
      /*初始化小球*/
      let ball = this.dropBalls.shift();
      if (ball) {
        ball.show = false;
        el.style.display = "none";
      }
    },
    addClick(){
    /*在自己定义的点击事件中调用小球事件*/
    this.drop(event.target);
},
    }
}
</script>