Question

我有一个组件，我可以在这样的条目动画，入口动画工作正常。 handleRemoval方法被执行，事件发射器从组件列表中过滤组件（使用observable）。但是：离开动画不会运行：

    @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在版本:enter中引入了:leave和2.1.0个快捷方式，因此如果您使用的是早期版本（我怀疑），您应该使用{{1 }和void => *转换定义。或者，也可以将Angular分布升级到* => void。

相应地更改代码适用于Angular 2.0 +

2.1.0+

Plunker：https://plnkr.co/edit/xW38PWgD3SQyhRv09IUW?p=preview

Angular2在休假时运行动画可观察的过滤器

1 个答案: