关于vue取消router-view transition影响的方法

丁景山
2023-12-01

公司要求做一个固定在底部的菜单,由于用的是vue-element-admin,考虑菜单在每个主路由都不同,所以固定以appmain进行绝对定位,但是router-view的transition会影响定位效果,造成闪动。

 <transition name="fade" mode="out-in"  >
      <keep-alive :include="cachedViews" >
        <router-view :key="key" />
      </keep-alive>
   </transition>

所以考虑对底部菜单栏组件在transition过渡时进行隐藏,过度完再显示出来。一开始使用transition的钩子函数,始终触发不了,可能是包裹router-view的原因,后来使用css成功实现了需求

 .fade-enter-active  {
      .footerMenu{
        display: none !important;
      }
  }
 类似资料: