Angular，你如何检测动画何时结束?

Question

我试图检测动画何时完成，以便我可以执行一些事后，我的研究导致了我的@animation.done和@animation.start，但它似乎在开始时不管我的动画是否完成。

我在我的@animation.done函数中添加了一条消息，它甚至在动画发生之前就开始触发，我相信

https://stackblitz.com/edit/angular-vtuydu?file=src/app/app.component.ts

HTML:

<button
type="button"
class="button-viewproject"
[@fadeInUpViewProject]="viewProjectState ? 'in' : 'out'"
(@fadeInUpViewProject.done)="animationDone($event)"
>
View Me
</button>

TS:

animationDone(event: any) {
console.log(this.viewProjectState); // alert('hey'); Seems to execute no matter what
// alert('hey'); Seems to execute no matter what
setTimeout(() => {}, 1900);
}

Answer 1

如果您查看传入animationDone()方法的AnimationEvent对象，您将看到该方法被调用两次:一次是从状态'void'到状态'out'，然后第二次是从状态'out'到状态'in':

Call #1事件:

{
"element": {},
"triggerName": "fadeInUpViewProject",
"fromState": "void", <----------------
"toState": "out", <-------------------
"phaseName": "done",
"totalTime": 0,
"disabled": false,
"_data": 1
}

呼叫#2事件:

{
"element": {},
"triggerName": "fadeInUpViewProject",
"fromState": "out", <-----------------
"toState": "in", <--------------------
"phaseName": "done",
"totalTime": 2000,
"disabled": false,
"_data": 3
}

第二个事件是当你的渐入动画实际完成时发生的事件(因为它达到了'in'的最终state)，所以在你的animationDone()方法中，你可以只检查传入事件对象的toState属性为'in'，然后你知道你的动画完成了。