vue原生小球抛物线仿优信二手车

最新推荐文章于 2024-01-22 10:33:46 发布

呆呆很暴躁

最新推荐文章于 2024-01-22 10:33:46 发布

阅读量88

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/jiuqingbudai/article/details/121408331

版权

HTML代码

HTML代码可以放到页面的最后边，因为用的是固定定位所以不会影响代码的正常运行

        <!-- 小球 -->
        <div v-for="ball in balls" :key="ball.index">
          <transition
            name="drop"
            @before-enter="beforeDrop"
            @enter="dropping"
            @after-enter="afterDrop"
          >
            <div
              ref="gao-bal"
              v-show="ball.show"
              :class="[iTop < cTop ? 'ball' : 'gao-ball', 'ball']"
            >
              <div class="inner inner-hook" ref="innerImg"></div>
            </div>
          </transition>
        </div>

js代码部分

<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(event) {
      /*在自己定义的点击事件中调用小球事件*/
      this.drop(event.target);
    },
  },
};
</script>

css代码

<style lang="less" scoped>
.shop {
  z-index: 999;
  position: fixed;
  top: 300px;
  left: 400px;
}
.ball {
  z-index: 999;
  position: fixed;
  left: 122px;
  bottom: 220px;
  z-index: 200;
  /* 贝塞尔曲线的调整方法我放在了页面最下边，可以参考任意一个链接进行调整 */
  transition: all 1s cubic-bezier(0.49, -0.29, 0.75, 0.41); /*贝塞尔曲线*/
}
.inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgb(0, 160, 220);
  transition: all 1s linear;
}
.cart {
  position: fixed;
  bottom: 22px;
  left: 32px;
  width: 30px;
  height: 30px;
  background-color: rgb(0, 160, 220);
  color: rgb(255, 255, 255);
}
</style>

因为这个贝塞尔曲线用的过程中我们还需要进行调整，为了方便，我找到了两个专门调节贝塞尔曲线的线上工具

cubic-bezier.com

http://web.chacuo.net/css3beziertool