Detailed explanation of Vue's built-in component transition (picture and text)

This article mainly introduces the detailed explanation (pictures and text) about the transition of Vue's built-in component. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Basic concepts

Vue provides many different ways to apply transition effects when inserting, updating, or removing the DOM

• In CSS transitions and animations Automatic application class

• can be used with third-party CSS animation libraries, such as Animate.css

• Use JavaScript in the transition hook function to directly manipulate the DOM

• Can be used with third-party JavaScript animation libraries, such as Velocity.js

Simple usage

• Use v-if/v-show to control the display and hiding, and use the transition component to control its change process

• A page child The component router-view disappears and hides, and the transition component is used to control its change process

<template>
// 子组件
    <transition>
      <router-view></router-view>
    </transition>
// if/show控制
    <transition>
      <p></p>
    </transition>
</template>

Class name introduction

1. v-enter: Defines the start state of the entry transition. It takes effect before the element is inserted and is removed on the next frame after the element is inserted.

2. v-enter-active: Defines the state when the entry transition takes effect. Applies throughout the transition, takes effect before the element is inserted, and removes after the transition/animation completes. This class can be used to define process times, delays and curve functions for entering transitions.

3. v-enter-to: Version 2.1.8 and above Defines the end state of the entry transition. Takes effect the next frame after the element is inserted (at the same time v-enter is removed), and is removed after the transition/animation is complete.

4. v-leave: Defines the starting state of the leave transition. It takes effect immediately when the leaving transition is triggered and is removed the next frame.

5. v-leave-active: Defines the state when the leave transition takes effect. Applies throughout the exit transition, takes effect immediately when the exit transition is triggered, and removes after the transition/animation completes. This class can be used to define process times, delays and curve functions for exit transitions.

6. v-leave-to: Version 2.1.8 and above Defines the end state of the leave transition. Takes effect the next frame after the leave transition is triggered (at the same time v-leave is removed), and is removed after the transition/animation completes.

The above is the vuejs official website introducing the notes I usually record below. Combined with pictures and texts, it is easier to understand

Principles of change

##Animation process appears:

• Start the frame before: Click to appear animation, the element changes from none to block, the frame before the animation starts, insert opacity:0attribute"1", and the monitoring opacity property change time is 3s “2”

• ##Second frame of animation:

  opacity:0, attribute "1" Remove, cause "2" Monitor execution time changes

• Last frame of animation:

  The animation ends, remove all

• Start the previous frame:

  Click to disappear animation, the element changes from block to none, the frame before the animation starts, only insert the monitoring opacity attribute change time is 3s "4"

• Second frame of animation:

  Insertion, “3” Attribute opacity:0 causes “2” Monitor execution event changes

• The last frame of the animation:

  The animation ends, remove all

The above is the entire content of this article, I hope it will help everyone learn Helpful, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

The above is the detailed content of Detailed explanation of Vue's built-in component transition (picture and text). For more information, please follow other related articles on the PHP Chinese website!