Using multiple "[@triggerName]" on single element stops removal of node after ":leave" animation completes

[avbentem]

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When using multiple [@triggerName] attributes on a single element, then when '* => void' or :leave completes, the node that was about to be removed from the DOM is not removed.

Okay:

<li *ngFor="let hero of heroes" [@flyInOut]>

Not okay (but fine in Angular 4.4.6):

<li *ngFor="let hero of heroes" [@flyIn] [@flyOut]>

Expected behavior

The node which removal triggered the animation, should be removed after the animation completes.

Note: this assumes that defining multiple [@triggerName] attributes is actually supported.

Using multiple [@triggerName] attributes worked in Angular 4.4.6, but it seems it was not actually documented. In Angular 5, this no longer works. The extensive example at https://angular.io/guide/animations#example-entering-and-leaving-from-different-states might indicate that one should use at most one [@triggerName], in which case the bug report is moot and the documentation might simply be clarified instead.

Minimal reproduction of the problem with instructions

See https://plnkr.co/edit/DQRDKpv6srJEsHbHd315?p=preview

• Make sure the rightmost "Enter & Leave" column is visible.

• Add some heroes.

• Remove the heroes.

• See that in the "Enter & Leave" column the animations work great, but when completed the heroes have not been removed (and hence re-appear after the animations complete):

  

This Plunker is based on https://github.com/angular/angular/blob/5.0.2/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts:

• Changed the single [@flyInOut] into [@flyIn] and [@flyOut]:

  <li *ngFor="let hero of heroes"
      [@flyIn]="'in'" [@flyOut]>
    {{hero.name}}
  </li>

• Separated the single flyInOut trigger into two triggers:

  animations: [
    trigger('flyIn', [
      state('in', style({transform: 'translateX(0)'})),
      transition('void => *', [
        style({transform: 'translateX(-100%)'}),
        animate(500)
      ]),
    ]),
    trigger('flyOut', [
      transition('* => void', [
        animate(500, style({transform: 'translateX(100%)'}))
      ])
    ])
  ]
  

• Same when using :enter and :leave.

What is the motivation / use case for changing the behavior?

For some elements we only apply [@flyOut], for others both [@flyIn] and [@flyOut]. An easy workaround is to just define more specific triggers (which we do now).

As this worked fine in Angular 4.4.6, this might have been introduced by:

• fix(animations): ensure animateChild() works with all inner leave animations #19532
• Restore animation child leave commits #19693

Environment

Angular version: 5.0.2


Browser:
- [x] Chrome (desktop) version 62.0.3202.94
- [?] Chrome (Android) version XX
- [?] Chrome (iOS) version XX
- [x] Firefox version 57.0
- [x] Safari (desktop) version 11.0.1
- [?] Safari (iOS) version XX
- [?] IE version XX
- [?] Edge version XX
 
Others:

[Murazaki]

That's the bug I was looking for. Is there any workaround ?

[matsko]

So the bug here is not that there are two triggers, but when one or more the triggers does not include a :leave animation. So @Murazaki a temporary work around is to ensure each trigger has a :leave (or * => void) animation (even if it's empty like transition(':leave', [ ])).

I'm working on a fix right now.

[matsko]

This fix will take care of it: #20740

[Murazaki]

@matsko thanks ! You rock !

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