feat: create performant animations by not using max-height as transit…

…ion prop
marcosmoura · Aug 26, 2023 · 3b3151e · 3b3151e
1 parent e044d17
commit 3b3151e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts
@@ -77,7 +77,7 @@ export const useToastContainer_unstable = (
   useIsomorphicLayoutEffect(() => {
     const element = toastRef.current;
 
-    if (!['idle', 'unmounted'].includes(type) || !element) {
+    if (type !== 'entering' || !element) {
       return;
     }
 

diff --git a/...ct-components/react-toast/src/components/ToastContainer/useToastContainerStyles.styles.ts b/...ct-components/react-toast/src/components/ToastContainer/useToastContainerStyles.styles.ts
@@ -24,36 +24,34 @@ const useToastContainerBaseClassName = makeResetStyles({
   ...shorthands.borderRadius(tokens.borderRadiusMedium),
   [toastCSSVars.height]: '44px',
 
-  marginTop: '16px',
   minHeight: '44px',
   pointerEvents: 'all',
   boxSizing: 'border-box',
 });
 
 const useToastMotionStyles = makeStyles({
   root: {
-    maxHeight: 0,
-    marginTop: 0,
     opacity: 0,
-    transitionProperty: 'max-height, margin-top, opacity',
+    marginTop: `calc(var(${toastCSSVars.height}) * -1)`,
+    transitionProperty: 'opacity, margin-top',
     transitionTimingFunction: tokens.curveEasyEase,
-    willChange: 'max-height, margin-top, opacity',
+    willChange: 'opacity, margin-top',
   },
 
   visible: {
-    maxHeight: `var(${toastCSSVars.height})`,
-    marginTop: '16px',
     opacity: 1,
+    marginTop: '16px',
   },
 
   entering: {
-    transitionDuration: `${tokens.durationNormal}, ${tokens.durationNormal}, ${tokens.durationSlow}`,
-    transitionDelay: `0ms, 0ms, ${tokens.durationNormal}`,
+    transitionDuration: `${tokens.durationGentle}, ${tokens.durationNormal}`,
+    transitionDelay: `${tokens.durationNormal}, 0ms`,
   },
 
   exiting: {
-    transitionDuration: `${tokens.durationNormal}, ${tokens.durationNormal}, ${tokens.durationSlow}`,
-    transitionDelay: `${tokens.durationSlow}, ${tokens.durationSlow}, 0ms`,
+    marginTop: `calc(var(${toastCSSVars.height}) * -1)`,
+    transitionDuration: `${tokens.durationGentle}, ${tokens.durationNormal}`,
+    transitionDelay: `0ms, ${tokens.durationGentle}`,
   },
 });
 

diff --git a/packages/react-components/react-toast/src/components/Toaster/useToasterStyles.styles.ts b/packages/react-components/react-toast/src/components/Toaster/useToasterStyles.styles.ts
@@ -11,9 +11,12 @@ export const toasterClassNames: SlotClassNames<ToasterSlots> = {
  * Styles for the root slot
  */
 const useRootBaseClassName = makeResetStyles({
-  position: 'fixed',
   width: '292px',
+  position: 'fixed',
   pointerEvents: 'none',
+  /* TODO: Measure the performance of creating a 3D layer with these styles vs without */
+  transform: 'translateZ(0)',
+  perspective: '1000px',
 });
 
 /**