Fade in and out of route jump
There is a need in development called high-end, atmospheric and high-end. So as a front-end, it is the responsibility to make your program cooler. We can add some animation effects when switching pages to improve the animation design of our program.
If you want the route to have transition animation, you need to add a <transition> tag outside the <router-view> tag, and the tag also needs a name attribute.
<transition name="fade" mode="in-out"> <router-view ></router-view> </transition>
CSS transition class name:
During the component transition process, four CSS class names will be switched. These four class names are related to the name attribute of transition, such as name=”fade”, and there will be the following four CSS class names:
fade-enter: Enters the beginning state of the transition, and takes effect when the element is inserted, and is deleted immediately after only one frame is applied.
fade-enter-active: Enters the end state of the transition, and takes effect when the element is inserted and is removed after the transition process is completed.
fade-leave: Leaves the beginning state of the transition, triggers when the element is deleted, and is deleted immediately after only one frame is applied.
fade-leave-active: The end state of leaving the transition, which takes effect when the element is deleted, and is deleted after the transition is completed.
Transition style:
.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 first, and after completion, the current element transition leaves.
out-in: The current element first transitions and leaves, and after the departure is completed, the new element transitions into.
The simple implementation of the above vue route switching fades is all the content I share with you. I hope you can give you a reference and I hope you can support me more.