이 게시물에 따라 NG2 - 부트 스트랩과 AngularJS와 2 NG2 - 부트 스트랩 모바일 네비게이션 바 (네비게이션 바 토글)

Question

내가 활성화 한 모바일 네비게이션 바에서 애니메이션을 활성화 할 수있는 방법이 있나요 :

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

큰 작동합니다. 애니메이션은 없습니다. 무너지는 메뉴에 애니메이션을 적용 할 수있는 방법이 있습니까?

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

어떤 제안이

나는 각이 애니메이션을 사용하려고했다?

Answer 1

마지막으로 해결책을 찾았습니다. navbar-collapse 클래스에는 CSS 스타일이 필요합니다.

overflow: hidden