角度2のブートストラップトグルをアニメートする方法は？

Question

今のように、ブートストラップはdisplay: noneをdisplay: blockに、またはその逆に変更するだけです。私はAngular 2 Animation Guideを読んできましたが、要素のstyle.displayプロパティに基づいて変更したいときは、すべてコンポーネントのプロパティの変更に依存するようです。

私はこれを間違った方法で考えていますか、どうすればいいですか？

Answer 1

Angular Docsで説明したように、次のように入力をアニメーション化し、要素の退場遷移を定義するには、ボイドや*の状態を使用することができます。

は、入力します。void => *
残す：* =>無効

を

animations: [ 
    trigger('myAwesomeAnimation', [ 
     transition('void => *', [ 
     style({ opacity: 0 }), 
     animate(1000) 
     ]), 
     transition('* => void', [ 
     animate(1000, style({opacity: 100})) 
     ]) 
    ]) 
] 

HTML

<ul> 
    <li @myAwesomeAnimation *ngFor="let i of list"> 
    {{ i }} 
    </li> 
</ul> 

Demo Punkr

Answer 2

私は、コンポーネントにtoggle()にjqueryのを使用してから切り替えて、ちょうど*ngIfとブールプロパティを使用して、より多くの角度-idomatic道を行ってきました。より洗練された宣言的で、:enterと:leaveの遷移を使用できます。