vue 2.0 購物車小球拋物線

備註：此項目模仿 餓了嗎。我用的是最新的Vue, 視頻上的一些寫法已經被廢棄了。

佈局代碼

<div class="ball-container">
  <transition name="drop"
              v-for="ball in balls"
              @before-enter="beforeDrop"
              @enter="dropping"
              @after-enter="afterDrop">
    <div v-show="ball.show" class="ball" v-bind:css="false">
      <div class="inner inner-hook" ></div>
    </div>
  </transition>
</div>

css代碼（使用stylus寫法）

.ball-container
  .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

js代碼

data() {
    return {
      balls : [
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        },
        {
          show: false
        }
      ],
      dropBalls: []
    };
},     
methods: {
    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);
          el.style.webkitTransform = `translate3d(0,${y}px,0)`;
          el.style.transform =  `translate3d(0,${y}px,0)`;
          let inner = el.getElementsByClassName('inner-hook')[0];
          inner.style.webkitTransform =  `translate3d(${x}px,0,0)`;
          inner.style.transform = `translate3d(${x}px,0,0)`;
        }
      }
    }，
    dropping(el) {
      /* eslint-disable no-unused-vars */
      let rf = el.offsetHeight;
      this.$nextTick(() => {
        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)';
      });
    },
    afterDrop(el){
      let ball = this.dropBalls.shift();
      if(ball) {
        ball.show = false;
        el.style.display = 'none';
      }
    }
}

getBoundingClientRect()。方法請閱讀這篇文章
https://www.cnblogs.com/limei...

說明：
goods 是一個組件，裏面包含menu(div) , foods(div), shopcart(購物車組件)。其中foods 包含cartcontrol(即小球組件)

組件之間的通訊：
說明：菜單和商品

第1個問題：小球，須要獲取所點擊的商品的數量。
利用Vue的props，將foods值傳遞給cartcontrol。可是這樣有個問題。即子組件更新，沒法同步回父組件。且，在子組件中，對food註冊了一個count屬性，此屬性也沒法同步回父組件(goods)。
解決方法：
導入全局的Vue。
利用Vue.set(target,key,value); 對 target註冊count;

第2個問題：小球點擊，將所點擊過的商品數目傳遞給 shopcart。
在goods的 computed:{} 定義一個方法，將該方法以props的方式，傳遞給shopcart。
由於，shopcart，對傳遞過去的數據僅數據運算（不會改變）。所以不用同步會父組件。

第3個問題：購物車小球作拋物線運動。
對於購物車小球作拋物線運動。首先，落點都在購物車，小球則是隨機的。要作拋物線運動，就要獲取，所點擊的 + 號的x,y位置。其次，拋物線運動，只有在enter--> enter-to這段期間有，在leave--> leave-to 期間是沒有的，所以，須要用Vue提供的鉤子函數。

獲取 + 號x,y 位置：
小球（cartcontrol）是子組件。須要把數據傳遞給 goods(父組件)。能夠使用Vuex,或者直接使用事件總線。對於餓了嗎demo。直接使用事件總線。
建立一個 空的Vue。在 cartcontrol 中 ，經過 Bus.$emit(key, ... arg); 註冊一個監聽，而後再父組件 經過Bus.$on(key, function(... arg));監聽此方法。將所操做的 dom 對象傳遞過去便可

Vue提供的鉤子這裏要說明一點，Vue在他的官網，對於只有過分的js，done是必須的，當我加上done的時候，after-enter方法沒法被執行。還有1個問題，Vue官網推薦，只有過分效果，在作過分動畫的元素上加上v-bind:class='false'。以前沒加，出現了，小球只能在第1次點擊的地方作過分效果。