vue-elementUl导航菜单栏折叠和展开会卡顿一秒文字才消失如何处理，菜单折叠动画实现方法

老规矩，先上图看下是不是跟你的问题一样

这就是我的菜单遇到的问题，用的elementul的菜单来做的，但是我这个折叠动画会在最后卡一秒，然后在完全折叠，展开倒是正常的，就是折叠一直有延迟一秒文字消失。让我很头疼。网上看了很多办法，最后我找到了一个很实用的办法。

思路

一开始我是看了网上说让我给:collapse-transition属性改成true。然后一定要记得加样式才行，如下：

.el-menu-vertical-demo:not(.el-menu--collapse){
		width: 250px;			//宽度自己掌握
		height: 100%;
	}

但是我加了后不生效！！我试过了放在本组件！也试过放总的scss文件！也试过deep穿透就是不生效？？？
然后我就又找了一圈发现，既然我这个折叠的时候会把我菜单的el-aside部分宽度改变来达到折叠效果，那我何必要在菜单上下手，可以直接让菜单就:collapse-transition为false，禁用动画，然后我直接给el-aside加动画效果不就可以了。这样el-aside改变宽度折叠起来的时候有了动画不就是一样的效果了吗。

上代码

第一步：把你的el-menu组件加上属性 :collapse-transition=“false”

<template>
  <div >
    <el-menu :router="true" unique-opened :collapse="isCollapse" :collapse-transition="false">
          <!-- 菜单栏的标题 -->
              <div class="title " v-if="isCollapse">ha</div>
              <div class="title" v-else>我的后台系统</div>
              <!-- 菜单组件 -->
        <menus v-for="(item,index) in menuData" :key="index" :menu="item" ></menus>
    </el-menu>
  </div>
</template>

第二步：到你的main.vue或者是layout.vue组件，也就是主出口组件内加样式

html部分----
<el-aside>
        <!-- 菜单组件 -->
          <nav-left></nav-left>
</el-aside>
//给你的el-aside组件加上这个动画效果，然后你在点击试试就有效果了。
css部分----
  .el-aside {
    transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -moz-transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -o-transition: width 0.15s;
  }