摘要：第個(gè)問(wèn)題購(gòu)物車小球做拋物線運(yùn)動(dòng)。首先，落點(diǎn)都在購(gòu)物車，小球則是隨機(jī)的。其次，拋物線運(yùn)動(dòng)，只有在這段期間有，在期間是沒(méi)有的，因此，需要用提供的鉤子函數(shù)。獲取號(hào)位置小球是子組件。直接使用事件總線。

備注：此項(xiàng)目模仿 餓了嗎。我用的是最新的Vue, 視頻上的一些寫(xiě)法已經(jīng)被廢棄了。

布局代碼

css代碼（使用stylus寫(xiě)法）

.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()。方法請(qǐng)閱讀這篇文章
https://www.cnblogs.com/limei...

說(shuō)明：
goods 是一個(gè)組件，里面包含menu(div) , foods(div), shopcart(購(gòu)物車組件)。其中foods 包含cartcontrol(即小球組件)

組件之間的通信：
說(shuō)明：菜單和商品

第1個(gè)問(wèn)題：小球，需要獲取所點(diǎn)擊的商品的數(shù)量。
利用Vue的props，將foods值傳遞給cartcontrol。但是這樣有個(gè)問(wèn)題。即子組件更新，無(wú)法同步回父組件。且，在子組件中，對(duì)food注冊(cè)了一個(gè)count屬性，此屬性也無(wú)法同步回父組件(goods)。
解決方法：
導(dǎo)入全局的Vue。
利用Vue.set(target,key,value); 對(duì) target注冊(cè)count;

第2個(gè)問(wèn)題：小球點(diǎn)擊，將所點(diǎn)擊過(guò)的商品數(shù)目傳遞給 shopcart。
在goods的 computed:{} 定義一個(gè)方法，將該方法以props的方式，傳遞給shopcart。
因?yàn)?，shopcart，對(duì)傳遞過(guò)去的數(shù)據(jù)僅數(shù)據(jù)運(yùn)算（不會(huì)改變）。因此不用同步會(huì)父組件。

第3個(gè)問(wèn)題：購(gòu)物車小球做拋物線運(yùn)動(dòng)。
對(duì)于購(gòu)物車小球做拋物線運(yùn)動(dòng)。首先，落點(diǎn)都在購(gòu)物車，小球則是隨機(jī)的。要做拋物線運(yùn)動(dòng)，就要獲取，所點(diǎn)擊的 + 號(hào)的x,y位置。其次，拋物線運(yùn)動(dòng)，只有在enter--> enter-to這段期間有，在leave--> leave-to 期間是沒(méi)有的，因此，需要用Vue提供的鉤子函數(shù)。

獲取 + 號(hào)x,y 位置：
小球（cartcontrol）是子組件。需要把數(shù)據(jù)傳遞給 goods(父組件)?？梢允褂肰uex,或者直接使用事件總線。對(duì)于餓了嗎demo。直接使用事件總線。
創(chuàng)建一個(gè) 空的Vue。在 cartcontrol 中 ，通過(guò) Bus.$emit(key, ... arg); 注冊(cè)一個(gè)監(jiān)聽(tīng)，然后再父組件 通過(guò)Bus.$on(key, function(... arg));監(jiān)聽(tīng)此方法。將所操作的 dom 對(duì)象傳遞過(guò)去即可

Vue提供的鉤子
這里要說(shuō)明一點(diǎn)，Vue在他的官網(wǎng)，對(duì)于只有過(guò)度的js，done是必須的，當(dāng)我加上done的時(shí)候，after-enter方法無(wú)法被執(zhí)行。
還有1個(gè)問(wèn)題，Vue官網(wǎng)推薦，只有過(guò)度效果，在做過(guò)度動(dòng)畫(huà)的元素上加上v-bind:class="false"。之前沒(méi)加，出現(xiàn)了，小球只能在第1次點(diǎn)擊的地方做過(guò)度效果。