current position:Home>[Vue] principle analysis of transition effect

[Vue] principle analysis of transition effect

2021-08-27 08:54:48 Not null

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 :

 Use fragment time to enhance the first official account of skills .png

  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-to2.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 :

 Development of cloud .png

  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-to2.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 .

copyright notice
author[Not null],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827085444267r.html

Random recommended