vue2.0使用animate.css做页面切换效果,切换时页面顶部会出现一段空白

vue2.0使用animate.css做页面切换效果,切换时页面顶部会出现一段空白

在main.js中引用animate.css

import 'animate.css'

在App.vue中使用

<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutLeft">
  <router-view></router-view>
</transition>

页面切换展示

阅读 13k
7 个回答
<transition mode="out-in">

基本上就能解决,不是出现空白,而是说切换的时候,之前的还没有消失,后来的就出现了(后来者居上)。使用过渡模式就能解决这个问题。

请问解决了 好像动画执行还是会占位置呢

如果可以去除leave-active-class="animated fadeOutLeft"的话,那个效果更加好

推荐问题