Есть ли способ активировать анимацию в мобильной навигационной панели ng2-bootstrap (navbar-toggle)

Я активировал мобильную панель навигации в angularjs 2 с помощью ng2-bootstrap в соответствии с этим сообщением:

Есть ли способ построить мобильная панель навигации в ng2-bootsrap?

Работает отлично. Хотя анимации нет. Есть ли способ анимировать сворачивающееся меню?

Я попытался использовать анимацию angular 2:

animations: [
 trigger('collapseChanged', [
  state('true', style({ height: '0px', border:0 })),
  state('false', style({ height: '*', border:0 })),
  transition('1 <=> 0', [animate('300ms ease-in')])
 ])
]

Анимация работает хорошо, но пункты меню не исчезают, когда меню свернуто:

 <div id="navbar" class="navbar-collapse" [@collapseChanged]="isCollapsed">
  <div>
    <ul class="nav navbar-nav navbar-right scroll-to">
      <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
        <a pageScroll routerLink="/" (click)="isCollapsed = !isCollapsed">Home</a>
      </li>
      <li routerLinkActive="active"><a routerLink="/mobility" (click)="isCollapsed = !isCollapsed">Mobil</a></li>
      <li routerLinkActive="active"><a routerLink="/excursions" (click)="isCollapsed = !isCollapsed">Ausflüge</a></li>
    </ul>
  </div>
</div><!--/.nav-collapse -->

Какие-либо предложения?


person chris08002    schedule 31.10.2016    source источник


Ответы (1)


Наконец я нашел решение. Классу navbar-collapse нужен стиль css

overflow: hidden  
person chris08002    schedule 08.11.2016