仿美团的小球抛物线

最新推荐文章于 2025-05-20 11:57:34 发布

@Programmer

最新推荐文章于 2025-05-20 11:57:34 发布

阅读量194

点赞数 3

分类专栏：仿美团的小球抛物文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_59097751/article/details/118934983

版权

仿美团的小球抛物专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用Vue.js结合CSS和JavaScript实现购物车小球的抛物线动画效果。通过`v-for`指令动态创建小球，并利用Vue的过渡组件进行动画控制。在`beforeDrop`、`dropping`和`afterDrop`钩子函数中处理小球的显示、位置变换和复位。此外，还展示了如何响应事件触发动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

在html部分的最大的盒子内放入

      <!--小球-->
      <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>

在data里面放入参数

data() {
    return {
  
      balls: [
        //小球 设为3个
        {
          show: false,
        },
      ],
    };
  },

这是js部分

  additem(event) {
      this.drop(event.target);
      this.cont++;
    },
    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 cont = this.balls.length;
      while (cont--) {
        let ball = this.balls[cont];
        if (ball.show) {
          let rect = ball.el.getBoundingClientRect(); //元素相对于视口的位置
          let x = rect.left -120;  //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) {
      /*重置小球数量 样式重置*/
      let rf = 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";
      }
    },

加加事件里面调用

jia( ) {
       // 小球抛物
      this.drop(event.target);
   
    },

这是css的部分

.shop {
  position: fixed;
  top: 300px;
  left: 400px;
  // margin-top: 300px;
  // margin-left: 400px;
}
.ball {
  position: fixed;
  left: 200px;
  bottom: 100px;
  // margin-top: 32px;
  // margin-left: 22px;
  z-index: 200;
  transition: all 1s cubic-bezier(0.49, -0.29, 0.75, 0.41); /*贝塞尔曲线*/
  z-index: 900;
}
.inner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: red;
  transition: all 1s linear;
}
.cart {
  position: fixed;
  bottom: 22px;
  left: 32px;
  width: 30px;
  height: 30px;
  background-color: red;
  color: rgb(255, 255, 255);
}