有没有办法在 ng2-bootstrap 移动导航栏（navbar-toggle）中激活动画答案

【问题标题】：Is there a way to activate animation in ng2-bootstrap mobile navbar (navbar-toggle)有没有办法在 ng2-bootstrap 移动导航栏（navbar-toggle）中激活动画
【发布时间】：2016-10-31 07:11:19
【问题描述】：

根据这篇文章，我已经使用 ng2-bootstrap 在 angularjs 2 中激活了移动导航栏：

Is there a way to build the mobile nav bar in 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 -->

有什么建议吗？

【问题讨论】：

标签： animation angular collapse ng2-bootstrap

【解决方案1】：

我终于找到了解决方案。 navbar-collapse 类需要一个 css 样式

overflow: hidden

【讨论】：