vue模块化开发，单面组件切换时，不知道大家有没有遇到过类似的问题

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

我这里用的是animate css动画插件，css动画切换页面的原理，相信大家都知道 ，它用的transform的原理，也就是说通过平移来实现视觉上的切换效果
单从上述来说，没有什么问题，如果说你的主页面有置顶导航与底端导航，就可以造成页面被蹭大，下方出现滚动条，也可能会导致固定在上方和底部的导航栏变形，这样在切换的一瞬间，会很丑。
下面是我分享的一个简单的解决方法，其实这个很简单，我也是今天看到有别人遇到的这个问题，所以我在这边分享一下：

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

我这边是在切换页面外面再加一个div容器：

.anmimate-box{
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    overflow: hidden;
}

上面的代码是包裹在外面的这个div容器的css样式，通过这个div容器，来固定住，不让页面切换时的平移来把整个页面蹭大。

希望我的分享能给有需要的人，带来帮助。
本人第一次写分享，不太会表达，如果还有不清楚，可以留言！