[Emotion checklist] Add missing motion query for transitions

elastic · Aug 14, 2023 · b3cffa1 · b3cffa1
1 parent e71e4f8
commit b3cffa1
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/src/components/resizable_container/resizable_button.styles.ts b/src/components/resizable_container/resizable_button.styles.ts
@@ -9,7 +9,7 @@
 import { css } from '@emotion/react';
 
 import { UseEuiTheme, transparentize } from '../../services';
-import { logicalCSS, mathWithUnits } from '../../global_styling';
+import { logicalCSS, mathWithUnits, euiCanAnimate } from '../../global_styling';
 
 export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -38,17 +38,23 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('top', '50%')}
         ${logicalCSS('left', '50%')}
         background-color: ${euiTheme.colors.darkestShade};
-        transition: width ${transition}, height ${transition},
-          transform ${transition}, background-color ${transition};
+
+        ${euiCanAnimate} {
+          transition: width ${transition}, height ${transition},
+            transform ${transition}, background-color ${transition};
+        }
       }
 
       /* Lighten the "grab" icon on :hover */
       &:hover {
         &::before,
         &::after {
           background-color: ${euiTheme.colors.mediumShade};
+
           /* Delay transition on hover so animation is not accidentally triggered on mouse over */
-          transition-delay: ${transitionSpeed};
+          ${euiCanAnimate} {
+            transition-delay: ${transitionSpeed};
+          }
         }
       }
 
@@ -62,9 +68,11 @@ export const euiResizableButtonStyles = (euiThemeContext: UseEuiTheme) => {
           background-color: ${euiTheme.colors.primary};
 
           /* Overrides default transition so that "grab" icon background-color doesn't animate */
-          transition: width ${transition}, height ${transition},
-            transform ${transition};
-          transition-delay: ${mathWithUnits(transitionSpeed, (x) => x / 2)};
+          ${euiCanAnimate} {
+            transition: width ${transition}, height ${transition},
+              transform ${transition};
+            transition-delay: ${mathWithUnits(transitionSpeed, (x) => x / 2)};
+          }
         }
       }
     `,