Does vue router realize that there is a blank space between two pages in and out of the page?

use vue router to imitate the app page to slide in and out, and there is a white gap between the two pages when Synchronize goes in and out. what is the reason for this? The official document says that if you do not set mode, it is the default Synchronize, but there is a delay

.

< transition: name= "transitionName" >

<router-view class="view-page"></router-view>

< / transition >

.view-page {

position: absolute;
width: 100%;
transition: all .5s linear;

}
.customers-left-enter, .requests-right-leave-active {

opacity: 1;
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);

}
.customers-left-leave-active, .requests-right-enter {

opacity: 1;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);

}

Mar.04,2021

  1. is the censorship element a gap that comes with the browser?
  2. mode= "out-in"

I have the same problem. Have you solved it?


you can find out whether the class attribute view-page is useful elsewhere. I also encounter this problem because there is a class name conflict when animating the transition

.
Menu