Анимация компонента небулярной боковой панели
Я использую небулярный компонент боковой панели, я пытаюсь сделать анимацию открытия и закрытия боковой панели. Я проверил 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>
1 ответ
На мой взгляд, боковая панель Nebular содержит контейнер внутри:
<nb-sidebar>
<div.main-container>
...
</div>
</nb-sidebar>
И если вы добавите переходы для обоих, sidebar
а также div.main-container
это должно обеспечить желаемое поведение.
nb-sidebar,
nb-sidebar > div.main-container {
transition: width 1s;
}