Skip to content

Commit dfd3d5a

Browse files
Add support for transition{run,start,cancel} events (#27345)
1 parent 1f8327f commit dfd3d5a

File tree

6 files changed

+78
-1
lines changed

6 files changed

+78
-1
lines changed

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

+10
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,9 @@ export type DOMEventName =
105105
| 'touchmove'
106106
| 'touchstart'
107107
// These are vendor-prefixed so you should use the exported constants instead:
108+
// 'transitionrun' |
109+
// 'transitionstart' |
110+
// 'transitioncancel' |
108111
// 'transitionend' |
109112
| 'volumechange'
110113
| 'waiting'
@@ -116,5 +119,12 @@ export const ANIMATION_ITERATION: DOMEventName =
116119
getVendorPrefixedEventName('animationiteration');
117120
export const ANIMATION_START: DOMEventName =
118121
getVendorPrefixedEventName('animationstart');
122+
123+
export const TRANSITION_RUN: DOMEventName =
124+
getVendorPrefixedEventName('transitionrun');
125+
export const TRANSITION_START: DOMEventName =
126+
getVendorPrefixedEventName('transitionstart');
127+
export const TRANSITION_CANCEL: DOMEventName =
128+
getVendorPrefixedEventName('transitioncancel');
119129
export const TRANSITION_END: DOMEventName =
120130
getVendorPrefixedEventName('transitionend');

packages/react-dom-bindings/src/events/DOMEventProperties.js

+7
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ import {
1414
ANIMATION_END,
1515
ANIMATION_ITERATION,
1616
ANIMATION_START,
17+
TRANSITION_RUN,
18+
TRANSITION_START,
19+
TRANSITION_CANCEL,
1720
TRANSITION_END,
1821
} from './DOMEventNames';
1922

@@ -129,5 +132,9 @@ export function registerSimpleEvents() {
129132
registerSimpleEvent('dblclick', 'onDoubleClick');
130133
registerSimpleEvent('focusin', 'onFocus');
131134
registerSimpleEvent('focusout', 'onBlur');
135+
136+
registerSimpleEvent(TRANSITION_RUN, 'onTransitionRun');
137+
registerSimpleEvent(TRANSITION_START, 'onTransitionStart');
138+
registerSimpleEvent(TRANSITION_CANCEL, 'onTransitionCancel');
132139
registerSimpleEvent(TRANSITION_END, 'onTransitionEnd');
133140
}

packages/react-dom-bindings/src/events/getVendorPrefixedEventName.js

+3
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ const vendorPrefixes = {
3131
animationend: makePrefixMap('Animation', 'AnimationEnd'),
3232
animationiteration: makePrefixMap('Animation', 'AnimationIteration'),
3333
animationstart: makePrefixMap('Animation', 'AnimationStart'),
34+
transitionrun: makePrefixMap('Transition', 'TransitionRun'),
35+
transitionstart: makePrefixMap('Transition', 'TransitionStart'),
36+
transitioncancel: makePrefixMap('Transition', 'TransitionCancel'),
3437
transitionend: makePrefixMap('Transition', 'TransitionEnd'),
3538
};
3639

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

+52-1
Original file line numberDiff line numberDiff line change
@@ -749,6 +749,57 @@ describe('ReactDOMEventListener', () => {
749749
});
750750
});
751751

752+
it('onTransitionRun', async () => {
753+
await testNativeBubblingEvent({
754+
type: 'div',
755+
reactEvent: 'onTransitionRun',
756+
reactEventType: 'transitionrun',
757+
nativeEvent: 'transitionrun',
758+
dispatch(node) {
759+
node.dispatchEvent(
760+
new Event('transitionrun', {
761+
bubbles: true,
762+
cancelable: false,
763+
}),
764+
);
765+
},
766+
});
767+
});
768+
769+
it('onTransitionStart', async () => {
770+
await testNativeBubblingEvent({
771+
type: 'div',
772+
reactEvent: 'onTransitionStart',
773+
reactEventType: 'transitionstart',
774+
nativeEvent: 'transitionstart',
775+
dispatch(node) {
776+
node.dispatchEvent(
777+
new Event('transitionstart', {
778+
bubbles: true,
779+
cancelable: false,
780+
}),
781+
);
782+
},
783+
});
784+
});
785+
786+
it('onTransitionCancel', async () => {
787+
await testNativeBubblingEvent({
788+
type: 'div',
789+
reactEvent: 'onTransitionCancel',
790+
reactEventType: 'transitioncancel',
791+
nativeEvent: 'transitioncancel',
792+
dispatch(node) {
793+
node.dispatchEvent(
794+
new Event('transitioncancel', {
795+
bubbles: true,
796+
cancelable: false,
797+
}),
798+
);
799+
},
800+
});
801+
});
802+
752803
it('onTransitionEnd', async () => {
753804
await testNativeBubblingEvent({
754805
type: 'div',
@@ -759,7 +810,7 @@ describe('ReactDOMEventListener', () => {
759810
node.dispatchEvent(
760811
new Event('transitionend', {
761812
bubbles: true,
762-
cancelable: true,
813+
cancelable: false,
763814
}),
764815
);
765816
},

packages/react-dom/src/__tests__/ReactTestUtils-test.js

+3
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,10 @@ describe('ReactTestUtils', () => {
120120
"touchEnd",
121121
"touchMove",
122122
"touchStart",
123+
"transitionCancel",
123124
"transitionEnd",
125+
"transitionRun",
126+
"transitionStart",
124127
"volumeChange",
125128
"waiting",
126129
"wheel",

packages/react-dom/src/test-utils/ReactTestUtilsFB.js

+3
Original file line numberDiff line numberDiff line change
@@ -838,6 +838,9 @@ const simulatedEventTypes = [
838838
'stalled',
839839
'suspend',
840840
'timeUpdate',
841+
'transitionRun',
842+
'transitionStart',
843+
'transitionCancel',
841844
'transitionEnd',
842845
'waiting',
843846
'mouseEnter',

0 commit comments

Comments
 (0)