vue中使用animate.css中跳转时候会同时显示两个不同页面导致错位
例如:我从工作台跳转到邮件模块
中间有一个过度动画
<transition
mode="out-in"
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
<router-view
style="animation-duration: 200ms"
></router-view>
</transition>
路由跳转的中间会出现这种情况:
图中会多出一块红色区域的空白,视觉体验很差
解决方案:
其实只要在路由跳转的时候监听$route 让页面先v-if=“false” ,然后用定时器把页面放出来就可以完美解决 ,记住定时器的时间一定要和动画持续时间保持一致,不能小于动画时间
$route(newValue, oldValue) {
this.show_nav = false;
setTimeout(() => {
this.show_nav = true;
}, 200);
}
<transition
mode="out-in"
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
>
<router-view
style="animation-duration: 200ms"
v-if="show_nav"
></router-view>
</transition>