设置星云侧边栏组件的动画

Question

我使用的是nebular侧边栏组件，我想做的是为侧边栏的打开和关闭设置动画。我检查了侧边栏API，但没有发现任何可以做到这一点的东西？我试图在类上应用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;
}