Angular 2のngスイッチをアニメートすることは可能ですか

Question

これをアニメーション化することは可能ですか？私は、コード

div([ngSwitch]="switchState") 
    ul(fxLayout="row", fxLayoutAlign="space-between", *ngSwitchCase="0") 
    some-list 
    ul(fxLayout="row", fxLayoutAlign="space-between", *ngSwitchCase="1") 
    second-list 
    ul(fxLayout="row", fxLayoutAlign="space-between", *ngSwitchCase="2") 
    third-list 

実際のスイッチの機能が正常に動作している、私はそれをアニメーション化したいが、イム、私はそれもDOMに存在してdoesntの時点で疑い、正確に確認してくださいどのようなCSSプロパティの角劇ではないのこのブロックを持っています新しい追加をDOMにアニメーション化することは可能ですか？

Answer 1

はい、Angular2 animation systemを使用してng-switchをアニメートすることは可能です。

ドキュメントについて詳しく読むことができますが、DOMに追加されているすべての要素にアニメーションを付けることができます。 *ngSwitchCaseを使用する場合、条件に基づいてDOMに削除され、挿入されます。この状態はvoid状態&と呼ばれ、void状態から可視に遷移するときに適用するアニメーションを選択できます。あなたは、このようなコンポーネントにアニメーションを定義することができ

<div [ngSwitch]="val"> 
    <p *ngSwitchCase="true" [@enterTrigger]="'fadeIn'">Value is TRUE</p> 
    <p *ngSwitchCase="false" [@enterTrigger]="'fadeIn'">Value is FALSE</p> 
</div> 

：ここ

@Component({ 
    selector: 'my-app', 
    animations: [ 
    trigger('enterTrigger', [ 
    state('fadeIn', style({ 
     opacity: '1', 
     transform: 'translateY(50%)' 
    })), 
    transition('void => *', [style({opacity: '0'}), animate('500ms')]) 
    ]) 
    ] 
}) 

void => *遷移は、それが移動する要素がアニメ化される方法を決定ngSwitchを使用して、次のマークアップを考えると

void状態から任意の状態（可視状態を含む）

Plunkrデモ：https://plnkr.co/edit/IPLImRt34esClBg1HZdm?p=preview

P.S.インストールすることを忘れないでください。@angular/animations