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

• Z时代
• 2024-02-15
• 分类：IT

  <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. 是因为展开的时候文字出现较晚的原因吗

回答：

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

以上是 element-plus aisde内嵌el-menu折叠动画问题？ 的全部内容， 来源链接： utcz.com/p/934274.html