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

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

[simeyla]

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.

[BeejeeDS]

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.