Vue动画的采坑

首先vue动画使用条件是v-if，v-show，动态组件和组件根节点

其次是使用钩子函数时必须浏览器重排才能实现动画效果，不然无效

一个小球动画效果

html代码

<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>

钩子函数

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.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)`;
    }
  }
},
dropping(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);
  });
},
afterDrop(el) {
  let ball = this.dropBalls.shift();
  if (ball) {
    ball.show = false;
    el.style.display = 'none';
  }
}