Add fade animation to reduce motion

Author: timolins

src/components/toast-bar.tsx

@@ -15,6 +15,9 @@ const exitAnimation = (factor: number) => `
 100% {transform: translate3d(0,${factor * -150}%,-1px) scale(.6); opacity:0;}
 `;
 
+const fadeInAnimation = `0%{opacity:0;} 100%{opacity:1;}`;
+const fadeOutAnimation = `0%{opacity:1;} 100%{opacity:0;}`;
+
 const ToastBarBase = styled('div', React.forwardRef)`
   display: flex;
   align-items: center;
@@ -53,28 +56,25 @@ const getAnimationStyle = (
 ): React.CSSProperties => {
   const top = position.includes('top');
   const factor = top ? 1 : -1;
-  return visible
-    ? {
-        animation: `${keyframes`${enterAnimation(
-          factor
-        )}`} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`,
-      }
-    : {
-        animation: `${keyframes`${exitAnimation(
-          factor
-        )}`} 0.4s forwards cubic-bezier(.06,.71,.55,1)`,
-      };
+
+  const [enter, exit] = prefersReducedMotion()
+    ? [fadeInAnimation, fadeOutAnimation]
+    : [enterAnimation(factor), exitAnimation(factor)];
+
+  return {
+    animation: visible
+      ? `${keyframes(enter)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`
+      : `${keyframes(exit)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`,
+  };
 };
 
 export const ToastBar: React.FC<ToastBarProps> = React.memo(
   ({ toast, position, style, children }) => {
     const animationStyle: React.CSSProperties = toast?.height
-      ? prefersReducedMotion()
-        ? {}
-        : getAnimationStyle(
-            toast.position || position || 'top-center',
-            toast.visible
-          )
+      ? getAnimationStyle(
+          toast.position || position || 'top-center',
+          toast.visible
+        )
       : { opacity: 0 };
 
     const icon = <ToastIcon toast={toast} />;

src/components/toaster.tsx

@@ -33,9 +33,9 @@ const getPositionStyle = (
     right: 0,
     display: 'flex',
     position: 'absolute',
-    transition: `all ${
-      prefersReducedMotion() ? 0 : 230
-    }ms cubic-bezier(.21,1.02,.73,1)`,
+    transition: prefersReducedMotion()
+      ? undefined
+      : `all 230ms cubic-bezier(.21,1.02,.73,1)`,
     transform: `translateY(${offset * (top ? 1 : -1)}px)`,
     ...verticalStyle,
     ...horizontalStyle,

src/core/store.ts

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import { DefaultToastOptions, Toast, ToastType } from './types';
-import { prefersReducedMotion } from './utils';
 
 const TOAST_LIMIT = 20;
 
@@ -16,33 +15,33 @@ export enum ActionType {
 
 type Action =
   | {
-      type: ActionType.ADD_TOAST;
-      toast: Toast;
-    }
+    type: ActionType.ADD_TOAST;
+    toast: Toast;
+  }
   | {
-      type: ActionType.UPSERT_TOAST;
-      toast: Toast;
-    }
+    type: ActionType.UPSERT_TOAST;
+    toast: Toast;
+  }
   | {
-      type: ActionType.UPDATE_TOAST;
-      toast: Partial<Toast>;
-    }
+    type: ActionType.UPDATE_TOAST;
+    toast: Partial<Toast>;
+  }
   | {
-      type: ActionType.DISMISS_TOAST;
-      toastId?: string;
-    }
+    type: ActionType.DISMISS_TOAST;
+    toastId?: string;
+  }
   | {
-      type: ActionType.REMOVE_TOAST;
-      toastId?: string;
-    }
+    type: ActionType.REMOVE_TOAST;
+    toastId?: string;
+  }
   | {
-      type: ActionType.START_PAUSE;
-      time: number;
-    }
+    type: ActionType.START_PAUSE;
+    time: number;
+  }
   | {
-      type: ActionType.END_PAUSE;
-      time: number;
-    };
+    type: ActionType.END_PAUSE;
+    time: number;
+  };
 
 interface State {
   toasts: Toast[];
@@ -64,7 +63,7 @@ const addToRemoveQueue = (toastId: string) => {
         toastId: toastId,
       });
     },
-    prefersReducedMotion() ? 0 : 1000
+    1000
   );
 
   toastTimeouts.set(toastId, timeout);
@@ -121,9 +120,9 @@ export const reducer = (state: State, action: Action): State => {
         toasts: state.toasts.map((t) =>
           t.id === toastId || toastId === undefined
             ? {
-                ...t,
-                visible: false,
-              }
+              ...t,
+              visible: false,
+            }
             : t
         ),
       };