refactor(react-positioning): migrate opacity transition to Fade compo…

…nent

packages/react-components/react-positioning/src/createSlideStyles.ts

@@ -8,21 +8,12 @@ import { DATA_POSITIONING_PLACEMENT } from './constants';
  * @returns Griffel styles to spread to a slot
  */
 export function createSlideStyles(mainAxis: number): GriffelStyle {
-  const fadeIn = {
-    from: {
-      opacity: 0,
-    },
-    to: {
-      opacity: 1,
-    },
-  };
-
   const slideDistanceVarX = '--fui-positioning-slide-distance-x';
   const slideDistanceVarY = '--fui-positioning-slide-distance-y';
 
   return {
-    // The fade has absolute values, whereas the slide amount is relative.
-    animationComposition: 'replace, accumulate',
+    // The slide amount is relative
+    animationComposition: 'accumulate',
     animationDuration: tokens.durationSlower,
     animationTimingFunction: tokens.curveDecelerateMid,
     [slideDistanceVarX]: `0px`,
@@ -43,7 +34,6 @@ export function createSlideStyles(mainAxis: number): GriffelStyle {
     },
 
     animationName: [
-      fadeIn,
       {
         from: {
           transform: `translate(var(${slideDistanceVarX}), var(${slideDistanceVarY}))`,
@@ -55,17 +45,16 @@ export function createSlideStyles(mainAxis: number): GriffelStyle {
     // Note: at-rules have more specificity in Griffel
     '@media(prefers-reduced-motion)': {
       [`&[${DATA_POSITIONING_PLACEMENT}]`]: {
-        animationComposition: 'replace',
-        animationDuration: '1ms',
-        animationName: fadeIn,
+        // Omit the slide animation
+        animationName: {},
       },
     },
 
     // Tested in Firefox 79
     '@supports not (animation-composition: accumulate)': {
       [`&[${DATA_POSITIONING_PLACEMENT}]`]: {
-        animationComposition: 'replace',
-        animationName: fadeIn,
+        // Omit the slide animation
+        animationName: {},
       },
     },
   };