Angular animation: :enter & :leave have non-symmetric behavior

[mfursov]

Affected Package

@angular/animations

Description

:enter animation works, while :leave does not for child components of *ngFor
I believe that the behavior should be symmetric.

🔬 Minimal Reproduction

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

🌍 Your Environment

Chrome 73

Angular Version:
7.2.5

Anything else relevant?
There is a workaround to make :leave animation to work by adding
trigger('animateChild', [ transition(':enter, :leave', [query('@*', animateChild())]) ]),
trigger either to *ngFor or to a child component.

or by moving animation trigger from the child component to the *ngFor element.

[Sturgelose]

We have exactly the same issue and we tracked the issue to @angular/animations:7.2.8 before, it didn't happen, which means it's a regression. In chrome dev tools, we can see that the :leave animation appears to happen but too fast to see it, but I guess the problem was introduced in this PR: #28911

We think it's here because it's the only change related to animations in version 7.2.8. May it be something related to frames of the animation, where the animation is only doing one frame rather than all of them, thus seeming that there is no :leave animation?

We have pinned our angular animations version to 7.2.7 until a fix is released...

[dario-piotrowicz]

Hi @mfursov the issue with your stackblitz is that you put the trigger in the div and not in the li, if you put @EnterExit in the li element everything works as expected as you can see in this fork of your stackblitz

The asymmetry is caused by the fact that the trigger is places in the wrong element, this causes the two different behavors, let me explain:

• when a new li element enters, it creates a new div, so its :enter animation kicks in and it gets animated as expected
• but when you remove an li element, it gets removed right away (it doesn't wait for anything, you haven't instructed the li to do anything of the sort), and the :leave animation is on the div which is "abruptly" removed from the dom without a chance to animate. Angular actually sort of tries to animate the div but it can't because it does not exist in the dom anymore.

This makes total sense, because as I just said the li element is added and removed by the *ngFor there is not logic/magic for it to know that one of it's children (the only one in this case) would want to animated a leave animation.

I hope this helps 🙂

[dario-piotrowicz]

I think there is much lack of clarity on how enter and leave animations work and are supposed to work (I've got this issue open to clear this out a bit: #44253)

I think this issue should potentially be closed as working as expected, unless you @mfursov disagree of course 🙂

[jessicajaniuk]

Thanks @dario-piotrowicz, for your clarifications here. @mfursov, I'm going to close this as behaving as intended, but we can definitely re-open if you feel this answer isn't clear enough / there's still a problem other than the open issue for documentation.

[angular-automatic-lock-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.}