Angular2 запустить анимацию в фильтре отпуска и наблюдения

У меня есть компонент, который можно анимировать при записи, как это, анимация записи работает нормально. Метод handleRemoval выполняется, и излучатель событий фильтрует компонент из списка компонентов (используя наблюдаемые). Но анимация: оставить не запускается:

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

Любая помощь была оценена.

Ответы

Ответ 1

Angular ввел :enter и :leave ярлыки в версии 2.1.0, поэтому, если вы используете более раннюю версию (как я подозреваю), вы должны использовать определения перехода void => * и * => void, Или, альтернативно, обновите свой дистрибутив Angular до 2.1.0+.

Изменение вашего кода соответственно работает в 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