Angular2 uruchom animację na urlopie i obserwowalny filtr

Question

Mam komponent, który mogę animować przy takim wpisie, animacja wpisu działa dobrze. Metoda handleRemoval zostaje wykonana, a emiter zdarzeń filtruje składnik z listy komponentów (za pomocą obserwowalnych). Ale: animacja urlopu nie działa:

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

Każda pomoc mile widziana.

Answer 1

kątowa wprowadził :enter i :leave skrótów w wersji 2.1.0, więc jeśli używasz starszej wersji (jak podejrzewam), należy stosować definicje przejściowym void => * i * => void. Lub, alternatywnie, zaktualizuj swoją dystrybucję kątową do 2.1.0+.

Zmiana kodu odpowiednio działa w Kątowymi 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