Simple implementation of VUE routing

The fade of the routing jump

There is a need for high end, atmosphere, and upper grade. So is a responsibility as a front end to make your program more cool. We can add some animation effects when switching, improve the dynamic design of our program

I want the route to have a transition animation, need to add tag outside the tag, the label also needs a Name Attribute

       
CSS transition class name :

In the assembly transition, there will be four CSS class names for switching. These four class names are related to the transition Name property, such as name = “fade”, there will be the following four CSS Class name: Fade-enter: Enter the start state of the transition, the element takes effect when the element is inserted, and only one frame is applied immediately.

Fade-Enter-Active: Enter the end state of the transition, the element takes effect when the element is inserted, and removed after the transition process is completed.

Fade-Leave: When leaving the beginning of the transition, the element is triggered when the element is deleted, and only one frame is applied immediately.

Fade-Leave-Active: The end state of leaving the transition, the element is deleted, and is deleted after leaving the transition.

.fade-enter {Opacity: 0;}. Fade-Leave {Opacity: 1; } .fade-enter-active {transition: opacity .5s;}. fade-leave-active {Opacity: 0; Transition: opacity .5s;}

Transition mode MODE:

in-out: The new element enters the transition, and the current element transition is left after completion.
 OUT-IN: The current element first transitions, and the new element transition is entered after leaving.   The simple implementation of the fade out of the Vue routing switch is the full content of Xiaobian sharing, I hope to give you a reference, I hope everyone will support Tumi Cloud. 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment