How to implement the Vue mouse wheel scrolling switching routing effect

A root routing component (the root routing component under the app, which needs to be scrolled as its child component)
Add a mouse scroll time listener to the root route component, and call the listener in mounted. When jumping to other routes (jumping out of this root route), the root route component will be destroyed, so clear the event listener in the destroyed hook function of the root route.

Vue routing switching transition

Vue transition

<transition :name="transitionName">
      <div></div>
 </transition>

Use transition to wrap the component that needs to transition, or a div, or a route. When it is created or destroyed, the specified animation effect will be loaded. This animation effect needs to be specified by yourself. Here, the specified transitionName

Then declare this in data, but assign this value to ' ', because different names need to correspond to the forward or backward routing.

When the route is forward (downward in this case), specify slide-down

Then define the activation effects in different states of slide-down as transition effects

.slide-down-enter-active,
.slide-down-leave-active {
transition: all 500ms;
position: absolute;
}

Then define the start animation

.slide-down-enter {
opacity: 0;
transform: translate3d(0, 100%, 0);
}

Define the leave activation animation

.slide-down-leave-active {
opacity: 0;
transform: translate3d(0, -100%, 0);
}

The following is generally fixed, that is, declare -enter-active, -leave-active as a transition effect and then write -enter, -leave-active. The specific changes required are generally one -enter, one -leave-active.

Next is how to determine whether the route is forward or backward. First, how to switch the route forward and backward

Next, how to determine whether it is the front or the back? When writing the route, write the meta, and when monitoring the route changes in the "root component", get the route information, and compare the sizes of the two to determine

This is the end of this article about how to implement the Vue mouse wheel scrolling route switching effect. For more relevant Vue route switching content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!