2016-10-31 49 views
1

Iが作動しているモバイルナビゲーションバーでアニメーションを有効にする方法はあります:このポスト応じNG2-ブートストラップとangularjs 2にNG2ブートストラップ携帯ナビゲーションバー(ナビゲーションバー-トグル)

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

は素晴らしい作品。しかし、アニメーションはありません。折りたたみメニューをアニメーション化する方法はありますか?

私は角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 --> 

任意の提案を?

答えて

0

最後に解決策が見つかりました。 navbar-collapseクラスにはCSSスタイルが必要でした

overflow: hidden 
関連する問題