fix(core): prevent child animation elements from being orphaned#67411
fix(core): prevent child animation elements from being orphaned#67411thePunderWoman merged 1 commit intoangular:mainfrom
Conversation
4e4a3b6 to
89b552f
Compare
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces a robust fix for an issue where animated elements were being orphaned in the DOM due to missed animationend events. The core of the solution is the implementation of a fallback timer for leave animations, which ensures cleanup is performed even if the browser drops the animation event. The changes also include handling for transition-property: all, fixes for potential race conditions using a hasCompleted flag, and a switch from stopImmediatePropagation to stopPropagation to improve event handling behavior. These changes are well-implemented and are accompanied by a new e2e test that specifically validates the fallback mechanism. Overall, this is a solid contribution that improves the reliability of animations.
When routing between two different routes, child animations were not finishing, causing elements to be left behind in the dom. The fix ensures the proper fallback is handled to avoid automatically cancelled custom events. This ensures the animation-fallback cancelling the animation actually completes, and ensures the element is removed. fixes: angular#67400
89b552f to
b953090
Compare
| if (event.target !== el) return; | ||
| if (event instanceof CustomEvent || isLongestAnimation(event, el)) { | ||
| // Custom fallback events don't have a target, so we bypass this check for them. | ||
| if (event.target !== el && event.type !== 'animation-fallback') return; |
There was a problem hiding this comment.
It's worth noting that event.target is a bit weird if the event comes from the shadow DOM. We use this utility in Components: https://github.com/angular/components/blob/main/src/cdk/platform/features/shadow-dom.ts#L59
There was a problem hiding this comment.
Good to know. I'll do a quick follow up after this to use a similar function.
When routing between two different routes, child animations were not finishing, causing elements to be left behind in the dom. The fix ensures the proper fallback is handled to avoid automatically cancelled custom events. This ensures the animation-fallback cancelling the animation actually completes, and ensures the element is removed.
fixes: #67400