Move disabling animations to useMovingAnimation.

WordPress · Aug 5, 2019 · 029c0a8 · 029c0a8
1 parent fd2fe66
commit 029c0a8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 22 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -261,11 +261,7 @@ function BlockListBlock( {
 	}, [ isFirstMultiSelected ] );
 
 	// Block Reordering animation
-	// useMovingAnimation uses hooks and requires being called even with disabled animations.
-	let animationStyle = useMovingAnimation( wrapper, isSelected || isPartOfMultiSelection, enableAnimation, animateOnChange );
-
-	// Dismiss animation style if animations are disabled.
-	animationStyle = enableAnimation ? animationStyle : {};
+	const animationStyle = useMovingAnimation( wrapper, isSelected || isPartOfMultiSelection, enableAnimation, animateOnChange );
 
 	// Focus the breadcrumb if the wrapper is focused on navigation mode.
 	// Focus the first editable or the wrapper if edit mode.

diff --git a/packages/block-editor/src/components/block-list/moving-animation.js b/packages/block-editor/src/components/block-list/moving-animation.js
@@ -75,23 +75,26 @@ function useMovingAnimation( ref, isSelected, enableAnimation, triggerAnimationO
 		immediate: prefersReducedMotion,
 	} );
 
-	return {
-		transformOrigin: 'center',
-		transform: interpolate(
-			[
-				animationProps.x,
-				animationProps.y,
-			],
-			( x, y ) => x === 0 && y === 0 ? undefined : `translate3d(${ x }px,${ y }px,0)`
-		),
-		zIndex: interpolate(
-			[
-				animationProps.x,
-				animationProps.y,
-			],
-			( x, y ) => ! isSelected || ( x === 0 && y === 0 ) ? undefined : `1`
-		),
-	};
+	// Dismiss animations if disabled.
+	return prefersReducedMotion ?
+		{} :
+		{
+			transformOrigin: 'center',
+			transform: interpolate(
+				[
+					animationProps.x,
+					animationProps.y,
+				],
+				( x, y ) => x === 0 && y === 0 ? undefined : `translate3d(${ x }px,${ y }px,0)`
+			),
+			zIndex: interpolate(
+				[
+					animationProps.x,
+					animationProps.y,
+				],
+				( x, y ) => ! isSelected || ( x === 0 && y === 0 ) ? undefined : `1`
+			),
+		};
 }
 
 export default useMovingAnimation;