公司要求做一个固定在底部的菜单,由于用的是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;
}
}