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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enter and leave animations don't behave as expected with parent-child relationships #35825
Comments
We also have this problem in our project. Thanks in advance! |
Guys this bug makes animations unusable. Almost 2 months have passed and nothing has happened to this issue. |
Having the same issue for my project |
@jelbourn My clients just keep on bothering me with new bugs having this bug as the root cause. |
When will this be solved? Having parent-child enter/leave animations problems seems to be critical for UX. |
@BeejeeDS I managed to get your Angular 9 Stackblitz working with a really stupid solution. Shouldn't be required at all, but if you switch from using message.component.html <div class="message" [@closeAnimation]="isClosed" *ngIf="!isClosed">
<button class="message-close-button" type="button" (click)="close()" tabindex="-1">
X
</button>
<ng-content></ng-content>
</div> The important part is this change: Now you need to modify your actual animation trigger. message.component.ts ...
trigger("closeAnimation", [
transition("false => true", [
useAnimation(MyAnimations.expand, { params: { opacity: 0 } })
]),
transition("true => false", [
useAnimation(MyAnimations.collapse, { params: { opacity: 0 } })
])
])
... Specifically, the part that is breaking your animation is the EDIT: Regarding Angular animations in general, there are many issues with animations I have encountered. If you use an Angular Material table with the Anyways, didn't mean for a mini rant. Just another problem with Angular's animation system. I might open a GitHub issue for what I mentioned above. Let me know if this helps. I've wasted so many hours at work due to stupid Angular animation issues. I understand your pain. |
This looks like a similar scenario as #24041, but in this case it seems like there's a Chrome bug involved (unlike #24041). The resulting DOM structure after reopening the panel is identical to the initial DOM tree and it looks like the styles have been cleared (the |
Any update on this issue? |
Hi @BeejeeDS, I've looked into this an I am pretty sure I understand why it happens (may be tricky to fix....) Please have a quick look at this fork of your ng9 stackblitz, in which I simply added animation callbacks and console logs please open the console and refresh the application, you will see that the after that if you close the panel, you will see that the the "surprise" comes if you know open again the panel, you will not see any logging in the console, that is why the content is not being shown, it is because it got the leave styles and is not being re-entered anymore the issue here is regarding content projection and the asynchronous way :enter/:leave are handled, basically whenever you insert a new element angular will trigger its enter animation right away (which is what happens here), but the parent's entering is not what triggers the children entering if you know what I mean leaving is different though, and the parent actually queries it's children to see if any of those with an animation trigger are present, if so it triggers their leave animation ( angular/packages/animations/browser/src/render/transition_animation_engine.ts Lines 318 to 319 in 155742e
so to summarise, when you project your content initially it creates a node and animates it's enter animation, then when you close the panel the panel itself will look for children and animate their leave animation, but the projected content is actually not being removed, thus it's enter animation will not be triggered when you open the panel back up (content projection can be a bit tricky, what I am about it is based on this nice ngconf talk: https://www.youtube.com/watch?v=PTwKhxLZ3jI) so, to fix your current issues I see two alternatives, either animate the entering of child elements, but that's tricky and has been discussed to be probably a bad idea (see: #44243), or we could try to make sure that leave animations, either don't query for children's animations or if they do make them ignore children which are being projected (I am not too sure if that is actually feasible, as I don't know that much about content projection...) 馃 Similarly to what @KyleStank suggested I think there may be various work arounds, like for example making the |
@dario-piotrowicz & @KyleStank The suggestion of Kyle prevents the issue but creates another one, the 'leave animation' doesn't get triggered because the *ngIf removes the element before the animation could take place. Dario's example does work but isn't really possible to do in a library full of components that have animations and can be nested inside one another. I just can't wrap my mind around the fact that 2 years have passed now and no actions have been taken to fix this 'high priority' issue. |
Not too sure if related to my usage, I got The error is from here I added a console log before the above line to see if
Here is my usage:
|
We ran into this as well, and it would be nice if there was a proper solution to this. The documentation doesn't say anything about the weird behavior of the
Or am I reading this wrong, and does that last sentence mean 'an elemen's I suppose it would make sense for Angular to include a check, because it might happen more often |
I can confirm that this problem is still present in Angular 17 (10 versions later and still no fix). animations: [
trigger('collapseAnimation', [
transition(':enter', [
useAnimation(MyAnimations.expand),
query(
'@*',
useAnimation(MyAnimations.expand, { params: { duration: '0s' } })
),
]),
transition(':leave', [
useAnimation(MyAnimations.collapse),
query(
'@*',
useAnimation(MyAnimations.expand, { params: { duration: '0s' } })
),
]),
]),
] |
i had the same problem. |
animations don't work properly on components only if I wrap the component into a div and put the animation onto the div. |
馃悶 Bug report
Affected Package
@angular/animation or @angular/core
Is this a regression?
I've made a Stackblitz with Angular 9, 8 and 7. All versions have this problem.
Description
There is a problem when you nest a component with an :enter and :leave animation inside a parent which is conditionally visible using *ngIf. When the parent is visible for the first time there is no issue. Once you trigger the parent to leave and enter again, the child will not be visible.
It looks like the leave animation of the child gets triggered when the parent leaves but the enter animation isn't fired once the parent enters again.
馃敩 Minimal Reproduction
I've made a simple example in Stackblitz. You can even make it less complex by removing the animations on the collapsible panel.
Stackblitz with Angular 17
Stackblitz with Angular 9
Stackblitz with Angular 8
Stackblitz with Angular 7
馃實 Your Environment
Angular 9 but it's also reproducible in 8 and 7.
Stackblitz contains my package versions.
The text was updated successfully, but these errors were encountered: