Angular2 run animation on leave & observable filter

Question

I have a component that I can animate on entry like this, the entry animation works fine. The handleRemoval method gets executed and an event emitter filters the component from the list of components (using observables). But the :leave animation does not run:

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

Any help appreciated.

Answer 1

Angular introduced the :enter and :leave shortcuts in version 2.1.0, so if you're using an earlier version (as I suspect), you should use the void => * and * => void transition definitions. Or, alternatively, upgrade your Angular distribution to 2.1.0+.

Changing your code accordingly works in Angular 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