New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
avbentem opened this Issue Nov 20, 2017 · 4 comments

Comments

Projects
None yet
4 participants
@avbentem

avbentem commented Nov 20, 2017

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):

    screenshot of demo

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:

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:

@avbentem avbentem changed the title from Using multiple "[@triggerName]" on single element stops removal of node after ":leave" completes to Using multiple "[@triggerName]" on single element stops removal of node after ":leave" animation completes Nov 20, 2017

@Murazaki

This comment has been minimized.

Show comment
Hide comment
@Murazaki

Murazaki Nov 30, 2017

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

Murazaki commented Nov 30, 2017

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

@matsko

This comment has been minimized.

Show comment
Hide comment
@matsko

matsko Dec 1, 2017

Member

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.

Member

matsko commented Dec 1, 2017

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 comment has been minimized.

Show comment
Hide comment
@matsko

matsko Dec 1, 2017

Member

This fix will take care of it: #20740

Member

matsko commented Dec 1, 2017

This fix will take care of it: #20740

@Murazaki

This comment has been minimized.

Show comment
Hide comment
@Murazaki

Murazaki Dec 4, 2017

@matsko thanks ! You rock !

Murazaki commented Dec 4, 2017

@matsko thanks ! You rock !

IgorMinar added a commit that referenced this issue Dec 6, 2017

@IgorMinar IgorMinar closed this in b78ada1 Dec 6, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment