• This is the 14th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Transitions _ single element transitions

Vue provides a variety of different application transitions when inserting, updating, or removing the DOM.

Single element/component transitions

Vue provides a wrapper component for Transition, and you can add an entry/exit transition to any element or component in the following cases

  • Conditional Rendering (using V-if)
  • Conditional presentation (using V-show)
  • Dynamic components
  • Component root node

The class name of the transition

There are six class switches in the entry/exit transition.

  1. V-enter: defines the start state of the transition. It takes effect before the element is inserted and is removed the next frame after the element is inserted.
  2. V-enter -active: defines the status when the transition takes effect. Applied throughout the transition phase, before the element is inserted and removed after the transition/animation is complete. This class can be used to define the process time, delay, and curve functions that enter the transition.
  3. V-enter -to: defines the end state of the transition (2.1.8+). The next frame takes effect after the element is inserted (the V-enter is removed at the same time) and removed after the transition/animation is complete.
  1. V-leave: Defines the start state of the exit transition. Immediately after the exit transition is triggered, the next frame is removed.
  2. V-leave-active: defines the status when the leave transition takes effect. Applies throughout the exit transition phase, takes effect immediately when the exit transition is triggered, and removes after the transition/animation is complete. This class can be used to define exit transition process time, delay and curve functions.
  3. V-leave-to: defines the end state of the exit transition (2.1.8+). The next frame takes effect after the exit transition is triggered (and the V-leave is deleted at the same time), and is removed after the transition/animation is complete.

Here is:

​

The class name prefix

  1. Transition None Name The feature class name is prefixed with V -.
  2. Transition has a name feature. For example, if name is fade, the class name prefix is fade-.

CSS animations

CSS animations are used in the same way as CSS, except that the v-Enter class name is not deleted immediately after the DOM is inserted, but when the AnimationEnd event is triggered.

Custom transition class name

We can customize the transition class name using the following attributes:

  • enter-class
  • enter-active-class
  • Enter – to – class (2.1.8 +)
  • leave-class
  • leave-active-class
  • Leave – to – class (2.1.8 +)

They take precedence over normal class names, which is useful when used in conjunction with Vue’s transition system and other third-party CSS animation libraries such as animation.css.

Redirecting to Animate. CSS Installation: NPM Install Animate. CSS — Save

The last

If it is helpful to you, I hope to give you a 👍 comment/collection/three even!

Bloggers are honest and answer questions for free ❤