vue过渡动画实现原理

57 阅读 0 评论 38 点赞

我是靠谱客的博主着急小甜瓜，最近开发中收集的这篇文章主要介绍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/