Change out animation duration to 200ms

WordPress · Sep 2, 2024 · c26c72e · c26c72e
1 parent a6f93b3
commit c26c72e
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -17,7 +17,10 @@ import type { DropdownMenuContext } from './types';
 const ANIMATION_PARAMS = {
 	SCALE_AMOUNT_OUTER: 0.82,
 	SCALE_AMOUNT_CONTENT: 0.9,
-	DURATION: '400ms',
+	DURATION: {
+		IN: '400ms',
+		OUT: '200ms',
+	},
 	EASING: 'cubic-bezier(0.33, 0, 0, 1)',
 };
 
@@ -58,7 +61,7 @@ export const MenuPopoverOuterWrapper = styled.div<
 	@media not ( prefers-reduced-motion ) {
 		transition-property: transform, opacity;
 		transition-timing-function: ${ ANIMATION_PARAMS.EASING };
-		transition-duration: ${ ANIMATION_PARAMS.DURATION };
+		transition-duration: ${ ANIMATION_PARAMS.DURATION.IN };
 		will-change: transform, opacity;
 
 		/* Regardless of the side, fade in and out. */
@@ -67,6 +70,10 @@ export const MenuPopoverOuterWrapper = styled.div<
 			opacity: 1;
 		}
 
+		&:has( [data-leave] ) {
+			transition-duration: ${ ANIMATION_PARAMS.DURATION.OUT };
+		}
+
 		/* For menus opening on top and bottom side, animate the scale Y too. */
 		&:has( [data-side='bottom'] ),
 		&:has( [data-side='top'] ) {