Köşeli ve göz atılabilir filtrede angular2 animasyonu çalıştır

Question

Girişte canlandırma yapabileceğim bir bileşen var, giriş animasyonu iyi çalışıyor. HandleRemoval yöntemi çalıştırılır ve bir olay yayımlayıcısı bileşeni bileşen listesinden (gözlenebilirler kullanarak) filtreler. Ama: izin animasyon çalışmaz:

@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); 
    } 
} 

Herhangi bir yardım takdir. (Sanıyorum gibi), sen void => * ve * => void geçiş tanımlarını kullanmalıdır önceki bir sürümünü kullanıyorsanız eğer öyleyse

Answer 1

Eğik sürüm 2.1.0 içinde :enter ve :leave kısayolları tanıttı. Veya alternatif olarak Açısal dağılımınızı 2.1.0+'a yükseltin.

kodunuzu değiştirme buna göre Açısal 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 çalışır: https://plnkr.co/edit/xW38PWgD3SQyhRv09IUW?p=preview