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

Author: someonewithpc

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

@@ -104,6 +104,9 @@ export type DOMEventName =
   | 'touchmove'
   | 'touchstart'
   // These are vendor-prefixed so you should use the exported constants instead:
+  // 'transitionrun' |
+  // 'transitionstart' |
+  // 'transitioncancel' |
   // 'transitionend' |
   | 'volumechange'
   | 'waiting'
@@ -115,5 +118,12 @@ export const ANIMATION_ITERATION: DOMEventName =
   getVendorPrefixedEventName('animationiteration');
 export const ANIMATION_START: DOMEventName =
   getVendorPrefixedEventName('animationstart');
+
+export const TRANSITION_RUN: DOMEventName =
+  getVendorPrefixedEventName('transitionrun');
+export const TRANSITION_START: DOMEventName =
+  getVendorPrefixedEventName('transitionstart');
+export const TRANSITION_CANCEL: DOMEventName =
+  getVendorPrefixedEventName('transitioncancel');
 export const TRANSITION_END: DOMEventName =
   getVendorPrefixedEventName('transitionend');

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

@@ -14,6 +14,9 @@ import {
   ANIMATION_END,
   ANIMATION_ITERATION,
   ANIMATION_START,
+  TRANSITION_RUN,
+  TRANSITION_START,
+  TRANSITION_CANCEL,
   TRANSITION_END,
 } from './DOMEventNames';
 
@@ -128,5 +131,9 @@ export function registerSimpleEvents() {
   registerSimpleEvent('dblclick', 'onDoubleClick');
   registerSimpleEvent('focusin', 'onFocus');
   registerSimpleEvent('focusout', 'onBlur');
+
+  registerSimpleEvent(TRANSITION_RUN, 'onTransitionRun');
+  registerSimpleEvent(TRANSITION_START, 'onTransitionStart');
+  registerSimpleEvent(TRANSITION_CANCEL, 'onTransitionCancel');
   registerSimpleEvent(TRANSITION_END, 'onTransitionEnd');
 }

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

@@ -739,6 +739,57 @@ describe('ReactDOMEventListener', () => {
       });
     });
 
+    it('onTransitionRun', () => {
+      testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTransitionRun',
+        reactEventType: 'transitionrun',
+        nativeEvent: 'transitionrun',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('transitionrun', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onTransitionStart', () => {
+      testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTransitionStart',
+        reactEventType: 'transitionstart',
+        nativeEvent: 'transitionstart',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('transitionstart', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
+    it('onTransitionCancel', () => {
+      testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onTransitionCancel',
+        reactEventType: 'transitioncancel',
+        nativeEvent: 'transitioncancel',
+        dispatch(node) {
+          node.dispatchEvent(
+            new Event('transitioncancel', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
     it('onTransitionEnd', () => {
       testNativeBubblingEvent({
         type: 'div',