The principle vue transition animation

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/u012193330/article/details/78601079

vue support the transition animation can achieve smooth animation, the following is an example of the official website:

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

The effect of this code is: Click the button to control the display of hidden P label, in the middle there will be transition effects.
Explained the official website is:
- Fade-the Enter define the start of the transition into the state. When the element is inserted into effect, the next frame is removed
- fade-enter-active, fade -leave-active to define the transition state. During the entire transition element acts, when the element is inserted into effect, removed after the transition / animation is completed
- fade-leave-to define the end away from the transition state. After leaving the transition is triggered an entry into force (Meanwhile fade-leave is deleted), removed after the transition / animation is complete.

Found from source, P label during the display, the element is inserted dom structure, and adds a fade-enter, fade-enter-active pattern, the P-tag Opacity = 0 at this time, is not visible. Then use the requestAnimationFrame, deleted fade-enter pattern in the next frame, when the target state is the P-tag visible opacity = 1, and thus triggering a transition transition effect, and gradually shows up.

I wrote a small chestnut confirms the above logic:

<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');
})

Understand this, and then go vue official documentation describes the transition animation, it is easy to understand.
This way to achieve animation there is a proper noun is called FLIP animation , the animation in order to achieve a smooth animation nascent implementation, specifically refer to the following link.
http://bubkoo.com/2016/03/31/high-performance-animations/

The principle vue transition animation

Guess you like