Leave＆ObservableフィルタでAngular2アニメーションを実行

Question

私はこのようなエントリでアニメーションできるコンポーネントを持っています。 handleRemovalメソッドが実行され、イベントエミッターが（observablesを使用して）コンポーネントのリストからコンポーネントをフィルターします。しかし：休暇アニメーションが実行されません：

@Component({ 
     animations: [ 
      trigger(
      'enterAnimation', [ 
       transition(':enter', [ 
       style({transform: 'translateY(100%)', opacity: 0}), 
       animate('500ms', style({transform: 'translateY(0)', opacity: 1})) 
       ]), 
       transition(':leave', [ 
       style({transform: 'translateY(0)', opacity: 1}), 
       animate('500ms', style({transform: 'translateY(100%)', opacity: 0})) 
       ]) 
      ] 
      ) 
     ], 
     template: ` 
      <div class="mb1 card text-xs-center rounded" [@enterAnimation]="show"> 

...

export class ContentPropertyComponent { 

    show: boolean = false; 

    constructor(private router: Router) { 
     this.show = true; 
    } 

    handleRemoval(contentProperty: PropertyModel) { 
     this.show = false; 
     this.delete.emit(this.contentProperty); 
    } 
} 

すべてのヘルプは大歓迎します。 （私は疑うよう）あなたは、あなたがvoid => *と* => void遷移定義を使用する必要があります以前のバージョンを使用しているので、もし

Answer 1

角度は、バージョン2.1.0に:enterと:leaveショートカットを導入しました。または、角度分布を2.1.0+にアップグレードします。

あなたのコードを変更するに応じて角度2.0+

animations: [ 
    trigger("enterAnimation", [ 
     transition('void => *', [ 
      style({transform: 'translateY(100%)', opacity: 0}), 
      animate('500ms', style({transform: 'translateY(0)', opacity: 1})) 
     ]), 
     transition('* => void', [ 
      style({transform: 'translateY(0)', opacity: 1}), 
      animate('500ms', style({transform: 'translateY(100%)', opacity: 0})) 
     ]) 
    ]) 
    ] 

Plunkerで動作します：https://plnkr.co/edit/xW38PWgD3SQyhRv09IUW?p=preview