Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "Vue how to solve the problem of routing transition animation jitter", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "Vue how to solve the problem of routing transition animation jitter" article.

Preface

As the core module of Vue, Vue-Router provides us with functions such as component-based routing configuration and routing parameters, which makes single-page applications easier to manage. Good routing management is particularly important, such as route interception, lazy routing loading, routing permissions and so on. At the same time, routing also supports view transition effect, route switching without adding transition animation will feel very stiff, in order to improve the user experience, routing transition is still necessary. After all, when you make it, you look comfortable.

Transition animation jitter code snippet

Here, add a transition effect of fading in and out of the route.

.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

In the picture, you can clearly see that when switching routes, the page will wobble, and the shaking is not small, looking at obsessive-compulsive disorder.

So the question is, why did this happen?

Process discovery problem

After eliminating the code problem, I thought of the situation caused by the layout problem, so in the debugging tool of chrome, I switched routes while observing the changes in the layout, and finally found something strange.

If you take a closer look at the structure of the html, you will find that there are two routes in the process of route transition, one is the incoming route and the other is the vanishing route.

Corroborate conjecture

In order to observe the layout, increase the transition time to 30s and repeat the above operation again.

In the slow transition, it can be seen more clearly that when switching to the next route (fade-enter-to), the previous route (fade-leave-to) occupies a bit and the position of the next route moves down, so the effect similar to jitter occurs in the case of fast transition.

Now that the problem has been found, find a way to solve it!

Solve the problem

The problem can be solved simply by adding display:none to the fade-leave-to route so that it does not occupy space when it disappears. Of course, you can also use positioning to break away from the document flow, but the offset after positioning 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 } the above is the content of this article on "how to solve the problem of animation jitter in routing transition by Vue". I believe everyone has a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.