1

I have activated the mobile navbar in angularjs 2 with ng2-bootstrap according this post:

Is there a way to build the mobile nav bar in ng2-bootsrap?

Works great. There is no animation though. Is there any way to animate the collapsing menu?

I have tried to use angular 2 animations:

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

The animation works well, but the Menu Items don't disappear when the menu is collapsed:

 <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 -->

Any suggestions?

dan1st
  • 12,568
  • 8
  • 34
  • 67
chris08002
  • 487
  • 5
  • 15

1 Answers1

0

Finally I found the solution. The navbar-collapse class needed a css style

overflow: hidden
chris08002
  • 487
  • 5
  • 15