vue.js - element-plus aisde内嵌el-menu折叠动画问题？

Question

  <div class="layout-container">
    <el-container class="layout">
      <!-- 左侧 -->
      <Aside></Aside>
      <!-- 右侧 -->
      <el-container direction="vertical">
        <Header></Header>
        <Main></Main>
      </el-container>
    </el-container>
  </div>

aside里面套了el-menu
样式为

.layout-aside {
      height: 100vh;
      overflow-x: hidden;
      transition: width 0.8s;
      -webkit-transition: width 0.8s;
      -moz-transition: width 0.8s;
      -webkit-transition: width 0.8s;
      -o-transition: width 0.8s;

      .el-menu {
        width: 100%;
        height: 100%;
        background-color: #333;
        border: none;
        transition: width 0.8s;
      }
    }

1. 折叠动画显示正常，但是展开动画就不正常了，我看表象应该是aside正常展开，但是el-menu展开没有跟随aside。
2. 有种解决办法就是直接把menu的border设成none，然后aside写个border，这样asider的border就可以跟着折叠一起了。但是不太理解，是因为折叠时间吗？
3. 是因为展开的时候文字出现较晚的原因吗

Answer 1

<el-submenu v-if="isExpanded" ...> ... </el-submenu>