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>

页面切换展示

回答:

<transition mode="out-in">

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

回答:

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

回答:

出现这个的原因是因为此时这里没有元素,设置absolute就好了吧
参考答案
https://segmentfault.com/q/10…

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注