From c73acec367e349ab367fa52c7112d0ce2cd4a907 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Thu, 17 Mar 2022 16:44:31 +0800
Subject: [PATCH] Fix sidebar reduce motion in customizer

---
 .../src/controls/sidebar-section.js           | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/customize-widgets/src/controls/sidebar-section.js b/packages/customize-widgets/src/controls/sidebar-section.js
index a30f4c242b035..33bb366b5233c 100644
--- a/packages/customize-widgets/src/controls/sidebar-section.js
+++ b/packages/customize-widgets/src/controls/sidebar-section.js
@@ -16,6 +16,14 @@ export default function getSidebarSection() {
 		wp: { customize },
 	} = window;
 
+	const reduceMotionMediaQuery = window.matchMedia(
+		'(prefers-reduced-motion: reduce)'
+	);
+	let isReducedMotion = reduceMotionMediaQuery.matches;
+	reduceMotionMediaQuery.addEventListener( 'change', ( event ) => {
+		isReducedMotion = event.matches;
+	} );
+
 	return class SidebarSection extends customize.Section {
 		ready() {
 			const InspectorSection = getInspectorSection();
@@ -58,10 +66,6 @@ export default function getSidebarSection() {
 					this.contentContainer
 						.closest( '.wp-full-overlay' )
 						.addClass( 'section-open' );
-					this.contentContainer.one( 'transitionend', () => {
-						this.contentContainer.removeClass( 'busy' );
-						args.completeCallback();
-					} );
 				} else {
 					this.contentContainer.addClass( [
 						'busy',
@@ -71,10 +75,20 @@ export default function getSidebarSection() {
 						.closest( '.wp-full-overlay' )
 						.addClass( 'section-open' );
 					this.contentContainer.removeClass( 'open' );
-					this.contentContainer.one( 'transitionend', () => {
-						this.contentContainer.removeClass( 'busy' );
-						args.completeCallback();
-					} );
+				}
+
+				const handleTransitionEnd = () => {
+					this.contentContainer.removeClass( 'busy' );
+					args.completeCallback();
+				};
+
+				if ( isReducedMotion ) {
+					handleTransitionEnd();
+				} else {
+					this.contentContainer.one(
+						'transitionend',
+						handleTransitionEnd
+					);
 				}
 			} else {
 				super.onChangeExpanded( expanded, args );