アングル4：アニメーションコンポーネントセレクタ

Question

* ngIfを使用して内容が表示されるアプリケーションでタブを使用しています。

これらのコンテンツの入力と終了をアニメーション化したいと思います。例：plunker

は、アニメーションのように思える：コンポーネントセレクタ 例にdoesntの仕事を残して：入力しplunker

template: ` 
<div> 
    <h2>Hello {{name}}</h2> 
    <button (click)="show = !show">togle show ({{show}})</button> 
    <my-child *ngIf="show" [@myAnimation]></my-child> 
</div> 
`, 


trigger(
    'myAnimation', 
    [ 
    transition(
    ':enter', [ 
     style({transform: 'translateX(100%)', opacity: 0}), 
     animate('500ms', style({transform: 'translateX(0)', 'opacity': 1})) 
    ] 
), 
    transition(
    ':leave', [ 
     style({transform: 'translateX(0)', 'opacity': 1}), 
     animate('500ms', style({transform: 'translateX(100%)', 'opacity': 0}), 

    ] 
)] 
) 

私は子コンポーネントにアニメーションを移動しようとしたが、そこに、ngIFは前の要素を削除しますアニメーションが起こることがあります。

Answer 1

これは、達成しようとしているもののコードが多すぎます。 stateを使用してenterとleaveの状態（*とvoid）を定義することができます。そしてそれらの間でアニメ化する。

[@myAnimation]を割り当てなしで使用している可能性もあります。あなたが何かにそれを縛らなければ、あなたは括弧を削除すべきです。

@Component({ 
    template: `<my-child *ngIf="show" @myAnimation></my-child>`, 
    animations: [ 
     trigger('myAnimation', [ 
     state('void', style({transform: 'translateX(100%)', opacity: 0})), 
     state('*', style({transform: 'translateX(0)', opacity: 1})), 
     transition(':enter, :leave', animate(500)) 
     ]) 
    ] 
}) 

plunkr