refactor(core): distinguish animations that share a name - #70110
Open
SkyZeroZx wants to merge 1 commit into
Open
refactor(core): distinguish animations that share a name#70110SkyZeroZx wants to merge 1 commit into
SkyZeroZx wants to merge 1 commit into
Conversation
animate.leave waits for the longest-running animation before removing an element. When multiple animations use the same keyframe name, their animationend events have the same animationName, so a shorter animation can be mistaken for the longest one and remove the element too early. Track the Animation returned by getAnimations() and compare it with event.animation when available. Keep the existing name/property checks as a fallback for older browsers and computed-style detection.
SkyZeroZx
force-pushed
the
refactor/improve-animation
branch
from
August 6, 2026 23:51
0b817a7 to
33eca1f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
animate.leavewaits for the longest-running animation before removing an element. When multiple animations use the same keyframe name, theiranimationendevents have the sameanimationName, so a shorter animation can be mistaken for the longest one and remove the element too early.Track the
Animationreturned bygetAnimations()and compare it withevent.animationwhen available. Keep the existing name/property checks as a fallback for older browsers and computed-style detection.Add an acceptance test where the shorter same-name animation ends first and verify the element stays until the longest animation finishes.
event.animationis supported in Firefox 152+, Chrome 151+, and Safari 27 (currently beta).References:
CSS Animations 2: https://drafts.csswg.org/css-animations-2/#dom-animationevent-animation
CSS Transitions 2: https://drafts.csswg.org/css-transitions-2/#dom-transitionevent-animation
Chrome 151: https://developer.chrome.com/release-notes/151#animation_accessor_on_animation_and_transition_events
Before
See demo : https://stackblitz.com/edit/stackblitz-starters-kafwrtts?file=src%2Fmain.ts
before.mp4
After
after.mp4