vue：页面过渡动画效果实现

学习完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>