Add support for transition{run,start,cancel} events by someonewithpc · Pull Request #27345 · react/react

someonewithpc · 2023-09-07T16:21:31Z

Summary

Add support for transitionstart, transitionrun and transitioncancel events, avoiding using the useEffect hacky workaround

How did you test this change?

yarn test packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js

facebook-github-bot · 2023-09-07T16:21:36Z

Hi @someonewithpc!

Thank you for your pull request and welcome to our community.

Action Required

In 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.

Process

In 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 CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

react-sizebot · 2023-09-07T16:26:30Z

Comparing: 14f50ad...bd5ecea

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	+0.18%	169.11 kB	169.41 kB	+0.12%	52.76 kB	52.82 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.18%	170.91 kB	171.22 kB	+0.15%	53.27 kB	53.35 kB
facebook-www/ReactDOM-prod.classic.js	+0.10%	590.58 kB	591.16 kB	+0.08%	103.86 kB	103.94 kB
facebook-www/ReactDOM-prod.modern.js	+0.10%	566.68 kB	567.26 kB	+0.10%	100.01 kB	100.11 kB
test_utils/ReactAllWarnings.js	Deleted	64.04 kB	0.00 kB	Deleted	16.02 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
test_utils/ReactAllWarnings.js	Deleted	64.04 kB	0.00 kB	Deleted	16.02 kB	0.00 kB

Generated by 🚫 dangerJS against bd5ecea

github-actions · 2024-04-07T02:09:46Z

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

eps1lon

Would love to get this into 19. Can you rebase to resolve merge conflicts?

someonewithpc · 2024-04-08T20:36:43Z

Would love to get this into 19. Can you rebase to resolve merge conflicts?

I see you went ahead and did the rebase :) Do you need me to do anything?

facebook-github-bot · 2024-04-08T20:40:42Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

eps1lon · 2024-04-08T20:47:13Z

I see you went ahead and did the rebase :) Do you need me to do anything?

I wasn't sure if we lost you. We're currently working on React 19 and I wanted to make sure this is included.

Sorry for the delay but this is good to go now 👍🏻

Works: https://codesandbox.io/p/sandbox/react-transition-events-lk98y8?file=%2Fsrc%2Findex.js%3A6%2C83

I'll just adjust the tests since these events are not actually cancelable.

…on events

someonewithpc · 2024-04-08T20:50:52Z

I wasn't sure if we lost you

Fair assumption, but I was just planning to get around to this basically now, after work. Given it got marked stale I thought it would just sit here. Thanks for the update, and I'm looking forward to using this

eps1lon · 2024-04-08T20:51:36Z

            new Event('transitionend', {
              bubbles: true,
-              cancelable: true,
+              cancelable: false,


Doesn't really matter since synthetic events don't need to match real events. But better to test them closer to what they'll look when dispatched from user agents.

eps1lon · 2024-04-08T21:23:11Z

@someonewithpc Thank you!

DiffTrain build for [dfd3d5a](dfd3d5a)

Summary: This sync includes the changes from: - D56103750 - [TODO] A shim for SECRET_INTERNALS This sync includes the following changes: - **[b5e5ce8](react/react@b5e5ce8e0 )**: Update ReactNativeTypes for root options (part 2) ([#28857](react/react#28857)) //<Ricky>// - **[da6ba53](react/react@da6ba53b1 )**: [UMD] Remove umd builds ([#28735](react/react#28735)) //<Josh Story>// - **[0c245df](react/react@0c245df1d )**: Complete the typo fix ([#28856](react/react#28856)) //<Sebastian Silbermann>// - **[f82051d](react/react@f82051d7a )**: console test utils fix: match entire string, not just first letter ([#28855](react/react#28855)) //<Andrew Clark>// - **[4ca20fd](react/react@4ca20fd36 )**: Test top level fragment inside lazy semantics ([#28852](react/react#28852)) //<Sebastian Markbåge>// - **[c0cf7c6](react/react@c0cf7c696 )**: Promote ASYNC_ITERATOR symbol to React Symbols ([#28851](react/react#28851)) //<Sebastian Markbåge>// - **[657428a](react/react@657428a9e )**: Add ReactNativeTypes for root options ([#28850](react/react#28850)) //<Ricky>// - **[7909d8e](react/react@7909d8eab )**: [Flight] Encode ReadableStream and AsyncIterables ([#28847](react/react#28847)) //<Sebastian Markbåge>// - **[13eb61d](react/react@13eb61d05 )**: Move enableUseDeferredValueInitialArg to canary ([#28818](react/react#28818)) //<Andrew Clark>// - **[8afa144](react/react@8afa144bd )**: Enable flag disableClientCache ([#28846](react/react#28846)) //<Jan Kassens>// - **[734956a](react/react@734956ace )**: Devtools: Add support for useFormStatus ([#28413](react/react#28413)) //<Sebastian Silbermann>// - **[17e920c](react/react@17e920c00 )**: [Flight Reply] Encode Typed Arrays and Blobs ([#28819](react/react#28819)) //<Sebastian Markbåge>// - **[0347fcd](react/react@0347fcd00 )**: Add on(Caught|Uncaught|Recoverable) opts to RN ([#28836](react/react#28836)) //<Ricky>// - **[c113503](react/react@c113503ad )**: Flush direct streams in Bun ([#28837](react/react#28837)) //<Kenta Iwasaki>// - **[9defcd5](react/react@9defcd56b )**: Remove redundant props assign ([#28829](react/react#28829)) //<Sebastian Silbermann>// - **[ed40236](react/react@ed4023603 )**: Fix mistaken "react-server" condition ([#28835](react/react#28835)) //<Sebastian Markbåge>// - **[c8a0350](react/react@c8a035036 )**: [Fizz] hoistables should never flush before the preamble ([#28802](react/react#28802)) //<Josh Story>// - **[4f5c812](react/react@4f5c812a3 )**: DevTools: Rely on sourcemaps to compute hook name of built-in hooks in newer versions ([#28593](react/react#28593)) //<Sebastian Silbermann>// - **[4354159](react/react@435415962 )**: Backwards compatibility for string refs on WWW ([#28826](react/react#28826)) //<Jack Pope>// - **[608edcc](react/react@608edcc90 )**: [tests] add `assertConsole<method>Dev` helpers ([#28732](react/react#28732)) //<Ricky>// - **[da69b6a](react/react@da69b6af9 )**: ReactDOM.requestFormReset ([#28809](react/react#28809)) //<Andrew Clark>// - **[374b5d2](react/react@374b5d26c )**: Scaffolding for requestFormReset API ([#28808](react/react#28808)) //<Andrew Clark>// - **[41950d1](react/react@41950d14a )**: Automatically reset forms after action finishes ([#28804](react/react#28804)) //<Andrew Clark>// - **[dc6a7e0](react/react@dc6a7e01e )**: [Float] Don't preload images inside `<noscript>` ([#28815](react/react#28815)) //<Josh Story>// - **[3f947b1](react/react@3f947b1b4 )**: [tests] Assert scheduler log empty in internalAct ([#28737](react/react#28737)) //<Ricky>// - **[bf09089](react/react@bf09089f6 )**: Remove Scheduler.log from ReactSuspenseFuzz-test ([#28812](react/react#28812)) //<Ricky>// - **[84cb3b4](react/react@84cb3b4cb )**: Hardcode disableIEWorkarounds for www ([#28811](react/react#28811)) //<Ricky>// - **[2243b40](react/react@2243b40ab )**: [tests] assertLog before act in useEffectEvent ([#28763](react/react#28763)) //<Ricky>// - **[dfc64c6](react/react@dfc64c6e3 )**: [tests] assertLog before act in ReactUse ([#28762](react/react#28762)) //<Ricky>// - **[42eff4b](react/react@42eff4bc7 )**: [tests] Fix assertions not flushed before act ([#28745](react/react#28745)) //<Ricky>// - **[ed3c65c](react/react@ed3c65caf )**: Warn if outdated JSX transform is detected ([#28781](react/react#28781)) //<Andrew Clark>// - **[3f9e237](react/react@3f9e237a2 )**: Fix: Suspend while recovering from hydration error ([#28800](react/react#28800)) //<Andrew Clark>// - **[7f5d25e](react/react@7f5d25e23 )**: Fix cloneElement using string ref w no owner ([#28797](react/react#28797)) //<Joseph Savona>// - **[bf40b02](react/react@bf40b0244 )**: [Fizz] Stop publishing external-runtime to stable channel ([#28796](react/react#28796)) //<Josh Story>// - **[7f93cb4](react/react@7f93cb41c )**: [DOM] Infer react-server entries bundles if not explicitly configured ([#28795](react/react#28795)) //<Josh Story>// - **[f613165](react/react@f61316535 )**: Rename SECRET INTERNALS to `__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE` ([#28789](react/react#28789)) //<Sebastian Markbåge>// - **[9644d20](react/react@9644d206e )**: Soften useFormState warning ([#28788](react/react#28788)) //<Ricky>// - **[c771016](react/react@c771016e1 )**: Rename The Secret Export of Server Internals ([#28786](react/react#28786)) //<Sebastian Markbåge>// - **[d50323e](react/react@d50323eb8 )**: Flatten ReactSharedInternals ([#28783](react/react#28783)) //<Sebastian Markbåge>// - **[f62cf8c](react/react@f62cf8c62 )**: [Float] treat `props.async` in Float consistent with the rest of react-dom ([#26760](react/react#26760)) //<Josh Story>// - **[dfd3d5a](react/react@dfd3d5af8 )**: Add support for transition{run,start,cancel} events ([#27345](react/react#27345)) //<Hugo Sales>// - **[1f8327f](react/react@1f8327f83 )**: [Fiber] Use real event priority for hydration scheduling ([#28765](react/react#28765)) //<Josh Story>// - **[97c90ed](react/react@97c90ed88 )**: [DOM] Shrink ReactDOMCurrentDispatcher method names ([#28770](react/react#28770)) //<Josh Story>// - **[9007fdc](react/react@9007fdc8f )**: [DOM] Shrink ReactDOMSharedInternals source representation ([#28771](react/react#28771)) //<Josh Story>// - **[14f50ad](react/react@14f50ad15 )**: [Flight] Allow lazily resolving outlined models ([#28780](react/react#28780)) //<Sebastian Markbåge>// - **[4c12339](react/react@4c12339ce )**: [DOM] move `flushSync` out of the reconciler ([#28500](react/react#28500)) //<Josh Story>// - **[8e1462e](react/react@8e1462e8c )**: [Fiber] Move updatePriority tracking to renderers ([#28751](react/react#28751)) //<Josh Story>// - **[0b3b8a6](react/react@0b3b8a6a3 )**: jsx: Remove unnecessary hasOwnProperty check ([#28775](react/react#28775)) //<Andrew Clark>// - **[2acfb7b](react/react@2acfb7b60 )**: [Flight] Support FormData from Server to Client ([#28754](react/react#28754)) //<Sebastian Markbåge>// - **[d1547de](react/react@d1547defe )**: Fast JSX: Don't clone props object ([#28768](react/react#28768)) //<Andrew Clark>// - **[bfd8da8](react/react@bfd8da807 )**: Make class prop resolution faster ([#28766](react/react#28766)) //<Andrew Clark>// - **[cbb6f2b](react/react@cbb6f2b54 )**: [Flight] Support Blobs from Server to Client ([#28755](react/react#28755)) //<Sebastian Markbåge>// - **[f33a6b6](react/react@f33a6b69c )**: Track Owner for Server Components in DEV ([#28753](react/react#28753)) //<Sebastian Markbåge>// - **[e3ebcd5](react/react@e3ebcd54b )**: Move string ref coercion to JSX runtime ([#28473](react/react#28473)) //<Andrew Clark>// - **[fd0da3e](react/react@fd0da3eef )**: Remove _owner field from JSX elements in prod if string refs are disabled ([#28739](react/react#28739)) //<Sebastian Markbåge>// Changelog: [General][Changed] - React Native sync for revisions 48b4ecc...b5e5ce8 jest_e2e[run_all_tests] bypass-github-export-checks Reviewed By: kassens Differential Revision: D56251607 fbshipit-source-id: e16db2fa101fc7ed1e009158c76388206beabd5f

## 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]>

## 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)

…onTransitionCancel` in `no-unknown-property` React has supported these transition events since 19.0 (react/react#27345), but the rule only knew `onTransitionEnd`. Co-Authored-By: Claude Fable 5.1 <[email protected]>

…roperty` (#26572) Add `onTransitionRun`, `onTransitionStart`, and `onTransitionCancel` and its Capture variants in `no-unknown-property` These were added in react/react#27345, after `onTransitionEnd` had been added previously. AI Disclosure: Help from Claude Code to confirm the correctness and find the original PR.

someonewithpc force-pushed the issue-26065 branch 2 times, most recently from 5311a43 to 4a94557 Compare September 7, 2023 17:47

facebook-github-bot added the CLA Signed label Sep 7, 2023

someonewithpc force-pushed the issue-26065 branch 2 times, most recently from fc02a1b to fe4c9ee Compare September 7, 2023 19:49

github-actions Bot added the Resolution: Stale Automatically closed due to inactivity label Apr 7, 2024

eps1lon reviewed Apr 7, 2024

View reviewed changes

Comment thread packages/react-dom-bindings/src/events/DOMEventNames.js

Add support for transtion{run,start,cancel} events

e924fc8

eps1lon force-pushed the issue-26065 branch from fe4c9ee to e924fc8 Compare April 8, 2024 20:32

eps1lon removed the CLA Signed label Apr 8, 2024

eps1lon changed the title ~~Add support for transtion{run,start,cancel} events~~ Add support for transition{run,start,cancel} events Apr 8, 2024

facebook-github-bot added the CLA Signed label Apr 8, 2024

Dispatch synthetic transition events that are closer to real transiti…

bd5ecea

…on events

eps1lon reviewed Apr 8, 2024

View reviewed changes

eps1lon removed the Resolution: Stale Automatically closed due to inactivity label Apr 8, 2024

eps1lon approved these changes Apr 8, 2024

View reviewed changes

eps1lon merged commit dfd3d5a into react:main Apr 8, 2024

github-actions Bot pushed a commit that referenced this pull request Apr 8, 2024

Add support for transition{run,start,cancel} events (#27345)

4638467

DiffTrain build for [dfd3d5a](dfd3d5a)

eps1lon mentioned this pull request Apr 8, 2024

[react] Add new Transition events to Canary release channel DefinitelyTyped/DefinitelyTyped#69306

Merged

rickhanlonii pushed a commit that referenced this pull request Apr 11, 2024

Add support for transition{run,start,cancel} events (#27345)

fd5e4f8

rickhanlonii pushed a commit that referenced this pull request Apr 11, 2024

Add support for transition{run,start,cancel} events (#27345)

5c4a7a5

EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024

Add support for transition{run,start,cancel} events (react#27345)

74b3663

This was referenced Apr 24, 2024

Update React from c3048aab4 to cb151849e1 vercel/next.js#64994

Closed

Support React 19 in App and Pages router vercel/next.js#65058

Merged

hochan222 mentioned this pull request Sep 15, 2026

[DOM] Fix missing propertyName on transitionrun, transitionstart, and transitioncancel #37631

Open

ternaus mentioned this pull request Oct 2, 2026

noUnknownAttribute reports valid React 19 transition event handlers biomejs/biome#12088

Closed

1 task done

Navigation Menu

Repository navigation

Add support for transition{run,start,cancel} events - #27345

Add support for transition{run,start,cancel} events#27345
eps1lon merged 2 commits into
react:mainfrom
someonewithpc:issue-26065

someonewithpc commented Sep 7, 2023 •

edited

Loading

Uh oh!

facebook-github-bot commented Sep 7, 2023

Uh oh!

react-sizebot commented Sep 7, 2023 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 7, 2024

Uh oh!

eps1lon left a comment

Uh oh!

Uh oh!

someonewithpc commented Apr 8, 2024

Uh oh!

facebook-github-bot commented Apr 8, 2024

Uh oh!

eps1lon commented Apr 8, 2024

Uh oh!

someonewithpc commented Apr 8, 2024

Uh oh!

eps1lon Apr 8, 2024

Uh oh!

eps1lon commented Apr 8, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

someonewithpc commented Sep 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How did you test this change?

Uh oh!

facebook-github-bot commented Sep 7, 2023

Action Required

Process

Uh oh!

react-sizebot commented Sep 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Critical size changes

Significant size changes

Uh oh!

github-actions Bot commented Apr 7, 2024

Uh oh!

eps1lon left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

someonewithpc commented Apr 8, 2024

Uh oh!

facebook-github-bot commented Apr 8, 2024

Uh oh!

eps1lon commented Apr 8, 2024

Uh oh!

someonewithpc commented Apr 8, 2024

Uh oh!

eps1lon Apr 8, 2024

Choose a reason for hiding this comment

Uh oh!

eps1lon commented Apr 8, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

someonewithpc commented Sep 7, 2023 •

edited

Loading

react-sizebot commented Sep 7, 2023 •

edited

Loading