Анимация небулярного компонента боковой панели

Я использую компонент боковой панели 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>

angular css nebular
person Ali Badr    schedule 07.11.2018    source источник
comment
Привет, Али Бадр, пожалуйста, проверьте правильность ответа Никиты.   -  person Emilio Numazaki    schedule 27.04.2020

Ответы (1)


arrow_upward
9
arrow_downward

На мой взгляд, боковая панель Nebular содержит внутри контейнер:

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

И если вы добавите переходы для обоих, sidebar и div.main-container, это должно обеспечить желаемое поведение.

nb-sidebar,
nb-sidebar > div.main-container {
  transition: width 1s;
}
person Nikita Poltoratsky    schedule 08.11.2018