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怎么實現購物小球拋物線”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。