[Vue] principle analysis of transition effect

This is my participation 8 The fourth of the yuegengwen challenge 20 God , Check out the activity details ：8 Yuegengwen challenge

summary

Vue In the insert 、 Update or remove DOM when , Provide a variety of different ways of application transition effect . Include the following tools ：

• stay CSS Automatic application in transition and animation class
• Can be used in conjunction with a third party CSS Animation library , Such as Animate.css
• Use... In the transition hook function JavaScript Direct manipulation DOM
• Can be used in conjunction with a third party JavaScript Animation library , Such as Velocity.js

In short, it's , You can use vue Of <transition></transition> Components , combination css Animation animation, transition transition, perhaps javascript operation dom To make your elements or components move . ad locum , We'll only talk about entering 、 Leave the transition with the list .

Principle of transition animation

Vue Provides  transition  Package components of , In the following cases , You can add entry to any element or component / Leave the transition .

• Conditions apply colours to a drawing ( Use  v-if)
• Condition display ( Use  v-show)
• Dynamic components
• Component root

Scenario requirements

Use buttons to control the display of sub components ; Show and hide implementation fade out （ Animation ） The effect of ;

// css Set the transition effect 
<style type="text/css">
        .fade-enter,
        .fade-leave-to {
                opacity: 0;
        }
        .fade-enter-active,
        .fade-leave-active {
                transition: opacity 3s;
        }
</style>
<div id="app">
        <button type="button" @click="handleToggle"> Toggle display / hide </button>
        <transition  name="fade">
                <child v-if="show"></child>
        </transition>
</div>
Vue.component('child', {
        template: `<div> Show or hide content </div>`
})
var vm = new Vue({
        el: '#app',
        data() {
                return {
                        show: true
                }
        },
        methods: {
                handleToggle: function() {
                        this.show = !this.show //  Control the explicit and implicit effects of components 
                }
        }
})
 Copy code 

Principle analysis

• <transition></transition>  Can wrap the content that needs to have an animation effect .

• In the transition into , There will be 3 individual class Handoff ：

1. fade-enter： Define the start state of transition . Takes effect before the element is inserted , Remove the next frame after the element is inserted .

2. fade-enter-active： Define the state when the transition takes effect . Apply... Throughout the transition , Takes effect before the element is inserted , In the transition / Remove... After animation . This class can be used to define the process time to enter the transition , Delay and curve functions .

3. fade-enter-to：2.1.8 Version and above Define the end state of transition . The next frame takes effect after the element is inserted ( meanwhile  fade-enter  Removed ), In the transition / Remove... After animation .

• In the transition from , There will be 3 individual class Handoff ：

1. fade-leave： Define the start state of the exit transition . Takes effect immediately when the exit transition is triggered , The next frame is removed .
2. fade-leave-active： Define the state when the exit transition takes effect . Apply... Throughout the transition , Takes effect immediately when the exit transition is triggered , In the transition / Remove... After animation . This class can be used to define the process time of leaving the transition , Delay and curve functions .
3. fade-leave-to：2.1.8 Version and above Define the end state of the exit transition . The next frame takes effect after the departure transition is triggered ( meanwhile  fade-leave  Be deleted ), In the transition / Remove... After animation .

• Above class by fade With the prefix of transition As defined in name='**' Agreement , If you don't specify name, It will be added automatically v- Prefix .
• By CSS3 attribute <transition> Wrapped dom label , modify  v-if or  v-show Command control display / Hide all with animation .