angular: bug(animations): Element rendered twice when animated

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] 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
[ ] Other... Please describe:

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

When triggering an animation of an element shown with *ngIf while an animation is already running, the element is rendered twice: bildschirmfoto 2018-09-27 um 12 31 37 The pink and the blue box should only be shown once. This happens when hitting the toggle button multiple times in the following example: angular 7.0.0-beta.7

This also occurs with angular 6.1.9: angular 6.1.9

This issue seems related to https://github.com/angular/angular/issues/23302

Note: at no time there exists more than one component instance, see this example: https://stackblitz.com/edit/angular-gitter-dp3cub bildschirmfoto 2018-09-27 um 12 58 12

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

It’s a bug

Environment


Angular version: 7.0.0-beta.7


Browser:
- [x] Chrome (desktop) version 68
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 62
- [x] Safari (desktop) version 12
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 8
Comments: 15 (4 by maintainers)

Most upvoted comments

I don’t know what severity1: confusing means? Perhaps that means hard to duplicate.

Here’s how :

I modified the tabs lazy loading demo on stackblitz.

The only thing I changed was adding a div element like this to each tab template.

<ng-template matTabContent>
      <div>
         Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}}
      </div>
 </ng-template>

You must have a device with a touch screen - or use a phone. You likely won’t be able to click fast enough with a mouse or trackpad.

Then touch as fast as you can :

Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Repeat a few times…

You’ll see this for tab 2. Notably only the middle tab is affected, so that should aid in troubleshooting.

The user experience will vary depending upon your tabs content. If you have an absolutely positioned tab you may not notice, but with a flex layout it’s a disaster. Also I get this bug on my iPhone with my app during normal usage - so you don’t have to go completely nuts with clicking!

@matsko would love to see progress on this now I found an easy repro.

simeyla on Feb 24, 2019

still a problem in v16, moving the animation trigger to a child of *ngIf fixed it to me and kept animation working

luizgrs on Nov 22, 2023

Having the same issue even when using [@.disabled]. The only solution is remove the animation.

Could this be related to my other issue #35825.

Animations in angular is realy a hot mess because of these bugs. It’s like the developers don’t even care about it.

BeejeeDS on Aug 19, 2020

I have the same issue with angular 9.1

Mubramaj on Apr 1, 2020