vue过渡动画实现原理

vue支持过渡动画，能够实现流畅的动画效果，下面是官网的一个例子：

<div id="demo">  <button v-on:click="show = !show">    Toggle  </button>  <transition name="fade">    <p v-if="show">hello</p>  </transition></div>

new Vue({  el: '#demo',  data: {    show: true  }})

.fade-enter-active, .fade-leave-active {  transition: opacity .5s}.fade-enter, .fade-leave-to {  opacity: 0}

这段代码的效果就是：点击按钮可以控制P标签的显示隐藏，中间会有过渡效果。
官网的解释是 ：
- fade-enter 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除
- fade-enter-active，fade-leave-active 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除
- fade-leave-to 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 fade-leave 被删除)，在 transition/animation 完成之后移除。

通过源码发现，P标签在显示的过程中，元素被插入的dom结构，并添加了fade-enter、fade-enter-active样式，此时P标签的opacity=0，不可见状态。然后利用了requestAnimationFrame，在下一帧中删除了fade-enter样式，此时P标签目标状态就是opacity=1的可见状态了，从而触发了transition过渡效果，逐渐显示了出来。

自己写了一个小栗子印证了上面的逻辑：

<style type="text/css">    .box{        width: 100px;        height: 100px;        background-color: red;    }    .enter {        opacity: 0    }    .mov {        transition: opacity 5s linear;        --webkit-transition: opacity 5s linear;    }</style>

<div id="box" class="box mov enter"></div>

var box = document.getElementById('box');requestAnimationFrame(function() {    box.setAttribute('class', 'box mov');})

明白了这些，再去看vue官方文档中对过渡动画的介绍，就很容易理解了。
这种实现动画的方式有一个专有名词叫作 FLIP动画，是为了实现流畅动画而新生的一种动画实现方式，具体可以参考下面链接。
http://bubkoo.com/2016/03/31/high-performance-animations/