Angular 2 动画回调.done，设置属性？

Question

假设我们有： <li *ngFor="let item of items" [@myTrigger]='state' (@myTrigger.start)="animStart($event)" (@myTrigger.done)="animDone($event)">{{ item }}</li>

和方法 animDone:

animDetails: string;

animDone(event:any) {
    console.log('Ended!');
    this.animDetails = 'I am done!';
}

在我看来{{ animDetails }}

奇怪的是 console.log('Ended!') 会适当地触发，而 animDetails 不会。

第一个动画，没有任何改变。第二个动画（通过单击按钮启动）"I am done!" 在开始时立即触发，而不是 .done。

Answer 1

出于性能原因，AFAIK 动画运行在 Angulars 区域之外。

constructor(private cdRef:ChangeDetectorRef) {}

animDetails: string;

animDone(event:any) {
    console.log('Ended!');
    this.animDetails = 'I am done!';
    this.cdRef.detectChanges();
}

Angulars 区域内的运行动画回调存在问题。我假设它已经修复，但你的问题似乎另有说明，除非你使用的不是最新的 Angular2 版本。

Angular 2 动画回调.done，设置属性？

Angular 2 Animation Callback .done, setting properties?

angular

angular2-animation