学习完vue的文档,在项目里,结合上animate.css, 我们会这么实现


<transition
        name="page"
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
    >
      <router-view></router-view>
    </transition>

这么添加,我们会发现,新页面进来时,旧页面会在新页面下面。在页面过渡动画展示期间,会在屏幕里同时看到两个页面。

 

解决方法是:加上mode,先消失,再进来。这样效果就自然了。

<transition
        name="page"
        mode="out-in"
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
    >
      <router-view></router-view>
    </transition>

 

Logo

前往低代码交流专区

更多推荐