Vue怎么實(shí)現(xiàn)購(gòu)物小球拋物線

本文小編為大家詳細(xì)介紹“Vue怎么實(shí)現(xiàn)購(gòu)物小球拋物線”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue怎么實(shí)現(xiàn)購(gòu)物小球拋物線”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例，

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: [ //小球 設(shè)為3個(gè)

     {

      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） {/* 購(gòu)物車小球動(dòng)畫實(shí)現(xiàn) */

     let count = this.balls.length;

     while （count--） {

      let ball = this.balls[count];

      if （ball.show） {

       let rect = ball.el.getBoundingClientRect（）; //元素相對(duì)于視口的位置

       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） { /*重置小球數(shù)量 樣式重置*/

     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怎么實(shí)現(xiàn)購(gòu)物小球拋物線”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。