`done` event is fired when state have changed whereas animation have not end

Which @angular/* package(s) are the source of the bug?

animations, platform-browser

Is this a regression?

No

Description

In my understanding @animation.done callback should be fired only when annimation is really completed, meaming delay is expired, transition is completed, styles are completely applyed. At this point animation is really done and event can be fired.

But

Now done callback is called also on state change (when changing state while other animation is still running) even if animation haven’t completed yet. Here angular doing next things:

1. Instantly finish running animation
2. Fire done event for this animation
3. Perform animation to go to the next state
4. Fire done event for that animation

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-vgcynl?file=src%2Fapp%2Fapp.component.ts

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular CLI: 12.1.1
Node: 14.15.3
Package Manager: pnpm 6.10.3
OS: linux x64

Angular: 12.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.1
@angular-devkit/build-angular   12.1.1
@angular-devkit/core            12.1.1
@angular-devkit/schematics      12.1.1
@angular/cdk                    12.1.2
@angular/material               12.1.2
@schematics/angular             12.1.1
rxjs                            6.6.7
typescript                      4.3.5

Anything else?

In the provided example wait a while. When you will see that card is disappeared by a about half, move mouse over and out of card and check console. You will see two events fired: first for show => hide animation and seccond for hide => show which is preformed immediately and while show => hide animation is still in process therefor aborting it. I think, first event should not be fired since in my understanding done means that animation is completely done: delay is expired, transition is done, all styles are fully applyed which is not applicable for first event, where animation is only about half done!

[owl-from-hogvarts]

I see what you mean now, you would want to know that the animation hasn’t run its full course right?

Yes. Kind of) Your suggestion about cancelled field looks like good solution.

Since i am not working with angular now for considerable time, it would be really cool, if you will open feature request by your self. If you have any questions here, you can ask me)

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}