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:
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
About this issue
- Original URL
- State: open
- Created 6 years ago
- Reactions: 8
- Comments: 15 (4 by maintainers)
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.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 :
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.
still a problem in v16, moving the animation trigger to a child of *ngIf fixed it to me and kept animation working
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.
I have the same issue with angular 9.1