Vue solves the problem of route transition animation jitter

Time:2020-11-19

preface

Vue-RouterAsVueIt provides us with component-based routing configuration, routing parameters and other functions, making single page application easier to manage. Good routing management is particularly important, such as route interception, route lazy loading, routing permissions, etc. all play a crucial role in the development. At the same time, the routing also supports the view transition effect. The route switching without adding transition animation will feel very stiff. In order to improve the user experience, routing transition is still necessary. After all, it’s comfortable to watch.

Transition dynamic document: https://cn.vuejs.org/v2/guide/transitions.html

Transition animation jitter

code snippet

Here we add a transition effect of fading in and out for routing


<div>
 <main>
 <Topbar />
 <transition name="fade">
 <router-view />
 </transition>
 </main>
</div>
.fade-enter,
.fade-leave-to{
 visibility: hidden;
 opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
 transition: opacity .2s ease;
}
.fade-enter-to,
.fade-leave{
 visibility: visible;
 opacity: 1;
}

effect

As can be seen in the figure, when switching routes, the page will jitter, and the jitter is not small, looking at obsessive-compulsive disorder.
So the question is, why does this happen?

process

discover problems

After eliminating the code problem, I think that it may be caused by the layout problem. So in the debugging tool of chrome, we switch the route while observing the change of layout. Finally, we find a little strange

If you carefully observe the structure of HTML, you will find that there will be two routes in the process of routing transition, one is the incoming route, the other is the route that is about to disappear. At this time, do you think that it is possible that one of the routes occupies the bit that causes jitter?

Confirm the conjecture

To facilitate the observation of the layout, increase the transition time to 30s and repeat the above operation again

In the slow transition, it can be more clearly seen that when switching to the next route (fade enter to), the previous route will occupy the bit and make the position of the next route move down. Therefore, in the case of fast transition, the effect of similar jitter occurs
Now that the problem has been found, find a way to solve it!

solve the problem

Just add the fade leave to routedisplay:none, so that it doesn’t occupy space when it disappears can solve the problem. Of course, positioning can also be used to break away from the document flow. However, after positioning, the offset needs to be calculated, which is not recommended.


.fade-enter{
 visibility: hidden;
 opacity: 0;
}
.fade-leave-to{
 display: none;
}
.fade-enter-active,
.fade-leave-active{
 transition: opacity .2s ease;
}
.fade-enter-to,
.fade-leave{
 visibility: visible;
 opacity: 1;
}

Final effect

summary

The above is a small series of Vue introduced to you to solve the routing transition animation jitter problem, I hope to help you!