vue2.0 transition组件实现动态过渡

vue的transition组件可以很容易的实现两套样式间的过渡动画，一种方式是完全用css实现，官方文档里说得很详细→进入/离开 & 列表过渡。

另一种方式是动态过渡，文档也有介绍→动态过渡。

最近项目里遇到的情况是，需要实现关于高度的动态过渡，文档的demo用到了插件，但我并不想为了一个动画引入一个插件，于是决定自己写。

钩子函数

钩子函数一共有8个，4个控制进入动画，4个控制离开动画，过程都是相似的。用进入动画说明，如果用v-if控制一个元素的入场，触发过程依次是：
beforeEnter：元素进入之前，此时DOM节点还没有渲染到页面；
enter：元素进入，渲染DOM节点，并为元素添加transition-name-enter类和transition-name-enter-active类，一帧后移除transition-name-enter类，添加transition-name-enter-to类；
afterEnter：元素进入后，此时入场动画已经结束，移除元素上的transition-name-enter-active和transition-name-enter-to类；
enterCancelled：取消动画后触发。

钩子函数与css类名配合使用

在我的项目中，要实现一个类似折叠面板的效果，元素的实际高度根据内容自适应，开关控制元素展开或收起。

css动画为过渡过程添加动画效果

.slideDown-enter-active, .slideDown-leave-active {
      transition: height .15s cubic-bezier(.645,.045,.355,1),opacity .15s cubic-bezier(.645,.045,.355,1);
}

元素进入后，因为已经渲染，可以拿到元素真正的高度，保存到变量中，再设置元素的初始状态，也就是slideDown-enter的样式。
当enter()执行完毕后，元素进入slideDown-enter-to的状态，此时用定时器给元素添加结束状态，也就是slideDown-enter-to的样式。之后元素执行css添加的动画。
done()回调决定了元素的进入动画结束，无论css动画是否完成，调用done()都会结束动画并触发afterEnter()钩子函数，可以通过定时器的时间控制与动画时长一致。

data () {
  return {
    height: 0
  }
},
methods: {
  enter (el, done) {
    this.height = el.offsetHeight;
    // 元素初始状态
    el.style.height = 0;
    el.style.opacity = 0;
    setTimeout(() => {
      // 元素结束状态
      el.style.height = this.height + 'px';
      el.style.opacity = 1;
    }, 0);
    setTimeout(() => {
      // 动画结束
      done();
    }, 150);
  },
  leave (el, done) {
    el.style.height = el.offsetHeight + 'px';
    el.style.opacity = 1;
    setTimeout(() => {
      el.style.height = 0;
      el.style.opacity = 0;
    }, 0);
    setTimeout(() => {
      done();
    }, 150);
  }
}

离开动画的原理和进入动画的一致，就不详细说了。