[Transition] Add easing prop to override default timing function

docs/pages/api-docs/collapse.json

@@ -7,6 +7,12 @@
       "default": "'0px'"
     },
     "component": { "type": { "name": "custom", "description": "element type" } },
+    "easing": {
+      "type": {
+        "name": "union",
+        "description": "{ enter?: string, exit?: string }<br>&#124;&nbsp;string"
+      }
+    },
     "in": { "type": { "name": "bool" } },
     "orientation": {
       "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },

docs/pages/api-docs/fade.json

@@ -2,6 +2,12 @@
   "props": {
     "appear": { "type": { "name": "bool" }, "default": "true" },
     "children": { "type": { "name": "custom", "description": "element" } },
+    "easing": {
+      "type": {
+        "name": "union",
+        "description": "{ enter?: string, exit?: string }<br>&#124;&nbsp;string"
+      }
+    },
     "in": { "type": { "name": "bool" } },
     "timeout": {
       "type": {

docs/pages/api-docs/grow.json

@@ -2,6 +2,12 @@
   "props": {
     "appear": { "type": { "name": "bool" }, "default": "true" },
     "children": { "type": { "name": "custom", "description": "element" } },
+    "easing": {
+      "type": {
+        "name": "union",
+        "description": "{ enter?: string, exit?: string }<br>&#124;&nbsp;string"
+      }
+    },
     "in": { "type": { "name": "bool" } },
     "timeout": {
       "type": {

docs/pages/api-docs/slide.json

@@ -9,6 +9,13 @@
       },
       "default": "'down'"
     },
+    "easing": {
+      "type": {
+        "name": "union",
+        "description": "{ enter?: string, exit?: string }<br>&#124;&nbsp;string"
+      },
+      "default": "{\n  enter: easing.easeOut,\n  exit: easing.sharp,\n}"
+    },
     "in": { "type": { "name": "bool" } },
     "timeout": {
       "type": {

docs/pages/api-docs/zoom.json

@@ -2,6 +2,12 @@
   "props": {
     "appear": { "type": { "name": "bool" }, "default": "true" },
     "children": { "type": { "name": "custom", "description": "element" } },
+    "easing": {
+      "type": {
+        "name": "union",
+        "description": "{ enter?: string, exit?: string }<br>&#124;&nbsp;string"
+      }
+    },
     "in": { "type": { "name": "bool" } },
     "timeout": {
       "type": {

docs/translations/api-docs/collapse/collapse.json

@@ -5,6 +5,7 @@
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "collapsedSize": "The width (horizontal) or height (vertical) of the container when collapsed.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.<br>⚠️ <a href=\"/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
+    "easing": "The transition timing function. You may specify a single easing or a object containing enter and exit values.",
     "in": "If <code>true</code>, the component will transition in.",
     "orientation": "The transition orientation.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",

docs/translations/api-docs/fade/fade.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "appear": "Perform the enter transition when it first mounts if <code>in</code> is also <code>true</code>. Set this to <code>false</code> to disable this behavior.",
     "children": "A single child content element.<br>⚠️ <a href=\"/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
+    "easing": "The transition timing function. You may specify a single easing or a object containing enter and exit values.",
     "in": "If <code>true</code>, the component will transition in.",
     "timeout": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object."
   },

docs/translations/api-docs/grow/grow.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "appear": "Perform the enter transition when it first mounts if <code>in</code> is also <code>true</code>. Set this to <code>false</code> to disable this behavior.",
     "children": "A single child content element.<br>⚠️ <a href=\"/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
+    "easing": "The transition timing function. You may specify a single easing or a object containing enter and exit values.",
     "in": "If <code>true</code>, the component will transition in.",
     "timeout": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.<br>Set to &#39;auto&#39; to automatically calculate transition time based on height."
   },

docs/translations/api-docs/slide/slide.json

@@ -4,6 +4,7 @@
     "appear": "Perform the enter transition when it first mounts if <code>in</code> is also <code>true</code>. Set this to <code>false</code> to disable this behavior.",
     "children": "A single child content element.<br>⚠️ <a href=\"/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
     "direction": "Direction the child node will enter from.",
+    "easing": "The transition timing function. You may specify a single easing or a object containing enter and exit values.",
     "in": "If <code>true</code>, the component will transition in.",
     "timeout": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object."
   },

docs/translations/api-docs/zoom/zoom.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "appear": "Perform the enter transition when it first mounts if <code>in</code> is also <code>true</code>. Set this to <code>false</code> to disable this behavior.",
     "children": "A single child content element.<br>⚠️ <a href=\"/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
+    "easing": "The transition timing function. You may specify a single easing or a object containing enter and exit values.",
     "in": "If <code>true</code>, the component will transition in.",
     "timeout": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object."
   },

packages/material-ui/src/Collapse/Collapse.d.ts

@@ -36,6 +36,11 @@ export interface CollapseProps extends StandardProps<TransitionProps, 'timeout'>
    * Either a string to use a HTML element or a component.
    */
   component?: React.ElementType<TransitionProps>;
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   */
+  easing?: TransitionProps['easing'];
   /**
    * If `true`, the component will transition in.
    */

packages/material-ui/src/Collapse/Collapse.js

@@ -124,6 +124,7 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) {
     className,
     collapsedSize: collapsedSizeProp = '0px',
     component,
+    easing,
     in: inProp,
     onEnter,
     onEntered,
@@ -201,8 +202,8 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) {
       wrapperRef.current.style.position = '';
     }
 
-    const { duration: transitionDuration } = getTransitionProps(
-      { style, timeout },
+    const { duration: transitionDuration, easing: transitionTimingFunction } = getTransitionProps(
+      { style, timeout, easing },
       {
         mode: 'enter',
       },
@@ -218,6 +219,7 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) {
     }
 
     node.style[size] = `${wrapperSize}px`;
+    node.style.transitionTimingFunction = transitionTimingFunction;
 
     if (onEntering) {
       onEntering(node, isAppearing);
@@ -244,8 +246,8 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) {
 
   const handleExiting = normalizedTransitionCallback((node) => {
     const wrapperSize = getWrapperSize();
-    const { duration: transitionDuration } = getTransitionProps(
-      { style, timeout },
+    const { duration: transitionDuration, easing: transitionTimingFunction } = getTransitionProps(
+      { style, timeout, easing },
       {
         mode: 'exit',
       },
@@ -263,6 +265,7 @@ const Collapse = React.forwardRef(function Collapse(inProps, ref) {
     }
 
     node.style[size] = collapsedSize;
+    node.style.transitionTimingFunction = transitionTimingFunction;
 
     if (onExiting) {
       onExiting(node);
@@ -353,6 +356,17 @@ Collapse.propTypes = {
    * Either a string to use a HTML element or a component.
    */
   component: elementTypeAcceptingRef,
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   */
+  easing: PropTypes.oneOfType([
+    PropTypes.shape({
+      enter: PropTypes.string,
+      exit: PropTypes.string,
+    }),
+    PropTypes.string,
+  ]),
   /**
    * If `true`, the component will transition in.
    */

packages/material-ui/src/Fade/Fade.d.ts

@@ -12,6 +12,11 @@ export interface FadeProps extends Omit<TransitionProps, 'children'> {
    * A single child content element.
    */
   children?: React.ReactElement<any, any>;
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   */
+  easing?: TransitionProps['easing'];
   /**
    * If `true`, the component will transition in.
    */

packages/material-ui/src/Fade/Fade.js

@@ -29,6 +29,7 @@ const Fade = React.forwardRef(function Fade(props, ref) {
   const {
     appear = true,
     children,
+    easing,
     in: inProp,
     onEnter,
     onEntered,
@@ -37,9 +38,9 @@ const Fade = React.forwardRef(function Fade(props, ref) {
     onExited,
     onExiting,
     style,
+    timeout = defaultTimeout,
     // eslint-disable-next-line react/prop-types
     TransitionComponent = Transition,
-    timeout = defaultTimeout,
     ...other
   } = props;
   const theme = useTheme();
@@ -68,7 +69,7 @@ const Fade = React.forwardRef(function Fade(props, ref) {
     reflow(node); // So the animation always start from the start.
 
     const transitionProps = getTransitionProps(
-      { style, timeout },
+      { style, timeout, easing },
       {
         mode: 'enter',
       },
@@ -88,7 +89,7 @@ const Fade = React.forwardRef(function Fade(props, ref) {
 
   const handleExit = normalizedTransitionCallback((node) => {
     const transitionProps = getTransitionProps(
-      { style, timeout },
+      { style, timeout, easing },
       {
         mode: 'exit',
       },
@@ -150,6 +151,17 @@ Fade.propTypes = {
    * A single child content element.
    */
   children: elementAcceptingRef,
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   */
+  easing: PropTypes.oneOfType([
+    PropTypes.shape({
+      enter: PropTypes.string,
+      exit: PropTypes.string,
+    }),
+    PropTypes.string,
+  ]),
   /**
    * If `true`, the component will transition in.
    */

packages/material-ui/src/Grow/Grow.d.ts

@@ -12,6 +12,11 @@ export interface GrowProps extends Omit<TransitionProps, 'timeout'> {
    * A single child content element.
    */
   children?: React.ReactElement<any, any>;
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   */
+  easing?: TransitionProps['easing'];
   /**
    * If `true`, the component will transition in.
    */

packages/material-ui/src/Grow/Grow.js

@@ -30,6 +30,7 @@ const Grow = React.forwardRef(function Grow(props, ref) {
   const {
     appear = true,
     children,
+    easing,
     in: inProp,
     onEnter,
     onEntered,
@@ -69,8 +70,12 @@ const Grow = React.forwardRef(function Grow(props, ref) {
   const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
     reflow(node); // So the animation always start from the start.
 
-    const { duration: transitionDuration, delay } = getTransitionProps(
-      { style, timeout },
+    const {
+      duration: transitionDuration,
+      delay,
+      easing: transitionTimingFunction,
+    } = getTransitionProps(
+      { style, timeout, easing },
       {
         mode: 'enter',
       },
@@ -92,6 +97,7 @@ const Grow = React.forwardRef(function Grow(props, ref) {
       theme.transitions.create('transform', {
         duration: duration * 0.666,
         delay,
+        easing: transitionTimingFunction,
       }),
     ].join(',');
 
@@ -105,8 +111,12 @@ const Grow = React.forwardRef(function Grow(props, ref) {
   const handleExiting = normalizedTransitionCallback(onExiting);
 
   const handleExit = normalizedTransitionCallback((node) => {
-    const { duration: transitionDuration, delay } = getTransitionProps(
-      { style, timeout },
+    const {
+      duration: transitionDuration,
+      delay,
+      easing: transitionTimingFunction,
+    } = getTransitionProps(
+      { style, timeout, easing },
       {
         mode: 'exit',
       },
@@ -128,6 +138,7 @@ const Grow = React.forwardRef(function Grow(props, ref) {
       theme.transitions.create('transform', {
         duration: duration * 0.666,
         delay: delay || duration * 0.333,
+        easing: transitionTimingFunction,
       }),
     ].join(',');
 
@@ -201,6 +212,17 @@ Grow.propTypes = {
    * A single child content element.
    */
   children: elementAcceptingRef,
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   */
+  easing: PropTypes.oneOfType([
+    PropTypes.shape({
+      enter: PropTypes.string,
+      exit: PropTypes.string,
+    }),
+    PropTypes.string,
+  ]),
   /**
    * If `true`, the component will transition in.
    */

packages/material-ui/src/Slide/Slide.d.ts

@@ -17,6 +17,15 @@ export interface SlideProps extends TransitionProps {
    * @default 'down'
    */
   direction?: 'left' | 'right' | 'up' | 'down';
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   * @default {
+   *   enter: easing.easeOut,
+   *   exit: easing.sharp,
+   * }
+   */
+  easing?: TransitionProps['easing'];
   /**
    * If `true`, the component will transition in.
    */