基于vue的仿饿了么关于小球动画第一次出现

这几天看到了基于vue仿饿了么购物车小球动画这一章，我的项目是基于vue2.x写的，所以视频里基于vue1.x的写法不适合我，于是按照文档改成了2.x版本的写法，这个动画的方式采用两层，一层是.ball的运动，一层是.inner的运动，可以将其写成一层只有.ball运动的写法，只需改变部分代码就行了，代码在注释里，记得样式代码也要改。

刚开始将视频里的代码改成了如下格式：

<div class="ball-container">
        <transition-group name="drop" 
          @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter">
          <div class="ball"  v-for="(ball,index) in balls" v-bind:key="index" v-show="ball.show">
            <div class="inner inner-hook"></div>
          </div>
        </transition-group>
      </div>

transition-group是vue文档中用于列表过渡的，在这里的小球虽然是用v-for遍历出来的，但是运动时候还是单个单个的运动，用transition-group是可以写出来的，还是将它改成了如下代码，使之成为单个运动的方式：

<div class="ball-container" v-for="ball in balls">
       <transition 
          v-on:before-enter="beforeEnter"
          v-on:enter="enter"
          v-on:after-enter="afterEnter"
          name="drop">
         <div class="ball" v-show="ball.show">
             <div class="inner inner-hook">
             </div>
         </div>
       </transition>
    </div>

stylus代码如下：

.ball-container
      .ball
        position: fixed
        left: 32px
        bottom: 22px
        z-index: 200
        transition: all 0.4s linear
        .inner
          width: 16px
          height: 16px
          border-radius: 50%
          background: rgb(0, 160, 220)
          transition: all 0.4s linear

js代码如下，注意：
v-on:before-enter=”beforeEnter”
v-on:enter=”enter”
v-on:after-enter=”afterEnter”这是触发钩子函数的代码，必须要，具体的方法写在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;
         }
       } 
    },
    beforeEnter: function (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.display = '';*/
           /*el.style.webkitTransform=`translate3d(${x}px,${y}px,0)`;*/
           /*el.style.transform = `translate3d(${x}px, ${y}px, 0)`;*/

          el.style.display = '';
          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)`;
        }
      }
    },
    enter: function (el, done) {
      /* 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)';
        el.addEventListener('transitionend', done);
      });
    },
    afterEnter: function (el) {
       let ball = this.dropBalls.shift();
       if (ball) {
           ball.show = false;
           el.style.display = 'none';
       }
    }