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/