Vue實作購物小球拋物線

Vue實作購物小球拋物線
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);
 }

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>

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>  

transtion屬性可以查看官方檔案，具體位置可以通過除錯獲得，