Angular2 在休假和可观察过滤器上运行动画

Question

我有一个组件，我可以像这样在进入时设置动画，进入动画效果很好。 handleRemoval 方法被执行，事件发射器从组件列表中过滤组件(使用可观察对象)。但是 :leave 动画没有运行:

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

感谢任何帮助。

Answer 1

Angular 在 2.1.0 版本中引入了 :enter 和 :leave 快捷方式，所以如果您使用的是早期版本(如我怀疑)，您应该使用 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}))
        ])
    ])
  ]

笨蛋:https://plnkr.co/edit/xW38PWgD3SQyhRv09IUW?p=preview