fix(Popover): opacity transition was not happening (#33421)

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
microsoft · Dec 9, 2024 · 39feb05 · 39feb05
1 parent cad1393
commit 39feb05
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/change/@fluentui-react-positioning-162d922f-b623-4f8c-908f-580cfe624fda.json b/change/@fluentui-react-positioning-162d922f-b623-4f8c-908f-580cfe624fda.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(Popover): opacity transition was not happening",
+  "packageName": "@fluentui/react-positioning",
+  "email": "robertpenner@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-positioning/src/createSlideStyles.ts b/packages/react-components/react-positioning/src/createSlideStyles.ts
@@ -21,7 +21,8 @@ export function createSlideStyles(mainAxis: number): GriffelStyle {
   const slideDistanceVarY = '--fui-positioning-slide-distance-y';
 
   return {
-    animationComposition: 'accumulate',
+    // The fade has absolute values, whereas the slide amount is relative.
+    animationComposition: 'replace, accumulate',
     animationDuration: tokens.durationSlower,
     animationTimingFunction: tokens.curveDecelerateMid,
     [slideDistanceVarX]: `0px`,
@@ -54,6 +55,7 @@ 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,
       },
@@ -62,6 +64,7 @@ export function createSlideStyles(mainAxis: number): GriffelStyle {
     // Tested in Firefox 79
     '@supports not (animation-composition: accumulate)': {
       [`&[${DATA_POSITIONING_PLACEMENT}]`]: {
+        animationComposition: 'replace',
         animationName: fadeIn,
       },
     },