Repository navigation
[DOM] Add support for onAnimationCancel - #37609
Merged
Merged
Conversation
Adds `onAnimationCancel` to React DOM, completing the animation event family alongside `onAnimationStart`, `onAnimationIteration`, and `onAnimationEnd`. `animationcancel` is a standard CSS Animations Level 1 event fired when an animation stops before it completes. This mirrors what react#27345 did for `transitionrun`, `transitionstart`, and `transitioncancel`. The event is registered as a simple event, mapped to `SyntheticAnimationEvent` so handlers receive `animationName`, `elapsedTime`, and `pseudoElement`, and included in the vendor prefix handling used by the other animation events. Note: while adding this, I noticed that `SimpleEventPlugin` only maps `transitionend` to `SyntheticTransitionEvent`. The `transitionrun`, `transitionstart`, and `transitioncancel` events added in react#27345 fall through to the base `SyntheticEvent`, so their handlers do not get `propertyName`, `elapsedTime`, or `pseudoElement`. That is left as is here to keep this change scoped, but it is likely worth a follow-up. Co-Authored-By: Claude Fable 5.1 <[email protected]>
|
Hi @connorshea! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at [email protected]. Thanks! |
|
Comparing: 019019b...1f8b3e1 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) Generated by sizebot against 1f8b3e1 |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
hoxyq
approved these changes
Sep 13, 2026
Collaborator
|
Thank you! |
github-actions Bot
pushed a commit
that referenced
this pull request
Sep 13, 2026
## Summary AI Disclosure: This was assisted using Claude Code, Fable 5.1. This PR description was fully written by me, manually, and the code was reviewed and tested by me manually. This improves the accuracy of the animation-related event props supported by React. This adds `onAnimationCancel` alongside the existing `onAnimationStart`, `onAnimationIteration`, and `onAnimationEnd` props. Adds `onAnimationCancel` to React DOM, completing the animation event family alongside `onAnimationStart`, `onAnimationIteration`, and `onAnimationEnd`. [`animationcancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event) is a CSS Animations Level 1 event fired when an animation stops before it has completed. This changeset is based on the similar changes in #27345 for the transition events. Note that MDN's browser compat data [currently claims](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event) that this is not supported in Chrome or Edge (at least not as `onanimationcancel`), but this change will work in Chrome 83+ due to React passing things through `addEventListener` anyway, and also the MDN docs are [outdated about this](mdn/browser-compat-data#29376), Chrome has started supporting `onanimationcancel` directly [since earlier this year](https://issues.chromium.org/issues/41404325). Also note that the animation and transition events on DOMEventName can probably be made to no longer do this vendor prefixing dance? I didn't do that in this PR and it should be done separately, but they've not been prefixed in a long time now and the comment rationalizing the current code mentions Android 4.x, which was last released over a decade ago now. So it seems like something that has just never been cleaned up. ## How did you test this change? - Added tests to match the sibling properties' tests. - Ran `yarn test`, `yarn lint`, and `yarn prettier` and all passed. Co-authored-by: Claude Fable 5.1 <[email protected]> DiffTrain build for [564923c](564923c)
github-actions Bot
pushed a commit
that referenced
this pull request
Sep 13, 2026
## Summary AI Disclosure: This was assisted using Claude Code, Fable 5.1. This PR description was fully written by me, manually, and the code was reviewed and tested by me manually. This improves the accuracy of the animation-related event props supported by React. This adds `onAnimationCancel` alongside the existing `onAnimationStart`, `onAnimationIteration`, and `onAnimationEnd` props. Adds `onAnimationCancel` to React DOM, completing the animation event family alongside `onAnimationStart`, `onAnimationIteration`, and `onAnimationEnd`. [`animationcancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event) is a CSS Animations Level 1 event fired when an animation stops before it has completed. This changeset is based on the similar changes in #27345 for the transition events. Note that MDN's browser compat data [currently claims](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event) that this is not supported in Chrome or Edge (at least not as `onanimationcancel`), but this change will work in Chrome 83+ due to React passing things through `addEventListener` anyway, and also the MDN docs are [outdated about this](mdn/browser-compat-data#29376), Chrome has started supporting `onanimationcancel` directly [since earlier this year](https://issues.chromium.org/issues/41404325). Also note that the animation and transition events on DOMEventName can probably be made to no longer do this vendor prefixing dance? I didn't do that in this PR and it should be done separately, but they've not been prefixed in a long time now and the comment rationalizing the current code mentions Android 4.x, which was last released over a decade ago now. So it seems like something that has just never been cleaned up. ## How did you test this change? - Added tests to match the sibling properties' tests. - Ran `yarn test`, `yarn lint`, and `yarn prettier` and all passed. Co-authored-by: Claude Fable 5.1 <[email protected]> DiffTrain build for [564923c](564923c)
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
2 participants
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.
Summary
AI Disclosure: This was assisted using Claude Code, Fable 5.1. This PR description was fully written by me, manually, and the code was reviewed and tested by me manually.
This improves the accuracy of the animation-related event props supported by React.
This adds
onAnimationCancelalongside the existingonAnimationStart,onAnimationIteration, andonAnimationEndprops.Adds
onAnimationCancelto React DOM, completing the animation event family alongsideonAnimationStart,onAnimationIteration, andonAnimationEnd.animationcancelis a CSS Animations Level 1 event fired when an animation stops before it has completed.This changeset is based on the similar changes in #27345 for the transition events.
Note that MDN's browser compat data currently claims that this is not supported in Chrome or Edge (at least not as
onanimationcancel), but this change will work in Chrome 83+ due to React passing things throughaddEventListeneranyway, and also the MDN docs are outdated about this, Chrome has started supportingonanimationcanceldirectly since earlier this year.Also note that the animation and transition events on DOMEventName can probably be made to no longer do this vendor prefixing dance? I didn't do that in this PR and it should be done separately, but they've not been prefixed in a long time now and the comment rationalizing the current code mentions Android 4.x, which was last released over a decade ago now. So it seems like something that has just never been cleaned up.
How did you test this change?
yarn test,yarn lint, andyarn prettierand all passed.