Hi @zygimantas I've had a look at this issue (and I can tell that the thing is still happening in Angular 12)

But I am not completely sure this is a bug, rather, if you want each line to loose the background as soon as it finished animating then I think you may not be setting the animation up in the correct way.

Let me explain...

It's not a "first run" type of issue

First of all, in your stackblitz, it seems clear to me why the background is not being removed at the first run but it is at consecutive ones, it is simply because those are two different animations, the first one is the parent animation, whilst your button just triggers the children's.

So I believe that this is not something that happens on the first run and not on consecutive ones, but it happens for a type of animation and not for the other

I can "prove" it by modifying your stackblitz so that it always triggers the parent animation, in such instance the issue always appears:
https://stackblitz.com/edit/angular-issue-repro2-jmrho6

Conversely I can just remove the animation trigger from the parent fixing the issue for all runs:
https://stackblitz.com/edit/angular-issue-repro2-3n3ccd

So, is it an issue related to animateChild()?

Given what I wrote above I feel it's safe to assume we only want to check the parent animation and see what's going on there, so there may be something wrong with animateChild.

But I am not really sure there is, because your parent's animation is actually asking the children to animate, so it could make sense for the children to animate and complete/remove the style when they are done, but it would also makes sense to keep the style until the whole group animation is done, so there are actually two different equally valid ways to handle this. And actually if you have a parent-child relationship/a group of animations it does make sense to me to have a different behavior compared to what you'd get it you animated all the items separately.
So I think this may actually be a deliberate implementation choice rather than a bug.

On the code side

Single animations are build as instances of WebAnimationsPlayer and when they terminate the execute their own onDoneFns functions:

but when you query them you get a group of animations which is built as an instance of AnimationGroupPlayer (as you can see here, with more than one player found a group is created) the difference here is that the single webAnimations present in the group are not independent and get all finished when the groupAnimation/parent does:

So...

I am really not sure that the Angular implementation is wrong, I think that when you query and animate the children from a parent you are agreeing in having the parent control the lifecycle of the child animations, especially in when they are done as in this case, so the behavior you are experiencing is the exact one you are signed up for and if you wanted the other behavior you would just animate the elements independently.

Anyways I am so sorry for my rambling, and I hope what I just wrote makes enough sense 😅
I may of course be wrong (as I am most of the time), so please let me know what you think and I would be anyways more than happy to discuss further 🙂

@dario-piotrowicz

Thank you for your comprehensive explanation. I've learned a lot from it!

@zygimantas you are too kind

As I said I cannot guarantee this to be the right answer, but it's what I came up by checking the behaviour and the code, and it does seem to make enough sense to me

I'm very happy that you've found it useful 🙂

Thank you @dario-piotrowicz ❤️ ❤️ ❤️ ❤️ for this really clear and effective description here.
I think @zygimantas would agree that we should close this issue as "working as expected".

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.}