动画星云侧边栏组件

Question

我正在使用 nebular 侧边栏组件，我想做的是为侧边栏的打开和关闭设置动画。我检查了侧边栏 API 但我没有找到任何可以做到这一点的东西？我尝试在 class 上应用 css 过渡，但它没有用，那么我该如何处理呢？

<nb-layout>

  <nb-layout-header subheader>
    <app-navbar style="width: 100%"></app-navbar>
  </nb-layout-header>

  <nb-sidebar [state]="'compacted'">
    <app-sidenav-menu></app-sidenav-menu>
  </nb-sidebar>

  <nb-layout-column>
    <router-outlet></router-outlet>
  </nb-layout-column>
</nb-layout>

Answer 1

据我所知，Nebular 侧边栏包含容器：

<nb-sidebar>
  <div.main-container>
  ...
  </div>
</nb-sidebar>

如果您为 sidebar 和 div.main-container 都添加转换，它应该会提供所需的行为。

nb-sidebar,
nb-sidebar > div.main-container {
  transition: width 1s;
}

动画星云侧边栏组件

Animating nebular sidebar component

css

angular

nebular