Vue怎么实现购物小球抛物线

本文小编为大家详细介绍“Vue怎么实现购物小球抛物线”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue怎么实现购物小球抛物线”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

Vue实现购物小球抛物线的方法实例，

html片段

<div id="app">

  <ul class="shop">

   <li v-for="item in items">

    <span>{{item.text}}</span>

    <span>{{item.price}}</span>

    <button @click="additem">添加</button>

   </li>

  </ul>

 <div class="cart" style="">{{count}}</div>

  <div class="ball-container"><!--小球-->

   <div v-for="ball in balls">

    <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>

 </div>

 css片段

.shop{

  position: fixed;

  top: 300px;

  left: 40px;

 }

 .ball{

  position: fixed;

  left: 32px;

  bottom: 22px;

  z-index: 200;

  transition: all 0.4s cubic-bezier（0.49, -0.29, 0.75, 0.41）; /*贝塞尔曲线*/

 }

 .inner{

  width: 16px;

  height: 16px;

  border-radius: 50%;

  background-color: rgb（0,160,220）;

  transition: all 0.4s linear;

 }

 .cart{

  position: fixed;

  bottom: 22px;

  left: 32px;

  width: 30px;

  height: 30px;

  background-color: rgb（0,160,220）;

  color: rgb（255,255,255）;

 }

js片段

<script>

  new Vue（{

   el:"#app",

   data:{

    count: 0,

    items:[

     {

      text: "苹果",

      price: 15

     },

     {

      text: "香蕉",

      price: 15

     }

    ],

    balls: [ //小球 设为3个

     {

      show: false

     },

     {

      show: false

     },

     {

      show: false

     },

    ],

    dropBalls:[],

   },

   methods:{

    additem（event）{

    this.drop（event.target）;

    this.count ++;

    },

    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 count = this.balls.length;

     while （count--） {

      let ball = this.balls[count];

      if （ball.show） {

       let rect = ball.el.getBoundingClientRect（）; //元素相对于视口的位置

       let x = rect.left - 32;

       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';

    }

   }

  }

 }）

 </script> 

读到这里，这篇“Vue怎么实现购物小球抛物线”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。