Clean up RTL safe rules

packages/components/src/animate/styles/animate-styles.js

@@ -8,15 +8,15 @@ import styled from '@emotion/styled';
  */
 import * as animations from './animate-keyframe-styles';
 import { reduceMotion } from '../../utils';
-import { getRTLSafeTranslateX, getRTLSafeXAxis } from './utils';
+import { appearTransform, appearTransformOrigin } from './utils';
 
 export const AppearingWrapper = styled.div`
 	animation: ${ animations.appear } 0.1s cubic-bezier( 0, 0, 0.2, 1 ) 0s;
 	animation-fill-mode: forwards;
 
 	${ reduceMotion( 'animation' ) }
-    
-	transform-origin: ${ ( p ) => p.yAxis } ${ getRTLSafeXAxis };
+
+	${ appearTransformOrigin }
 `;
 
 export const SlidingWrapper = styled.div`
@@ -25,7 +25,7 @@ export const SlidingWrapper = styled.div`
 
 	${ reduceMotion( 'animation' ) }
 
-	transform: translateX( ${ getRTLSafeTranslateX } );
+	${ appearTransform }
 `;
 
 export const LoadingWrapper = styled.div`

packages/components/src/animate/styles/utils.js

@@ -1,31 +1,45 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+
 /**
  * Internal dependencies
  */
 import { getRTL } from '../../utils';
 
-export const getRTLSafeTranslateX = ( { origin } ) => {
+const RTL_TRANSLATE_X = {
+	'-100%': '+100%',
+	'+100%': '-100%',
+};
+
+export const appearTransform = ( { origin } ) => {
 	const isRTL = getRTL();
 
+	let translateX = origin === 'right' ? '+100%' : '-100%';
 	if ( isRTL ) {
-		return origin === 'right' ? '-100%' : '+100%';
+		translateX = RTL_TRANSLATE_X[ translateX ];
 	}
 
-	return origin === 'right' ? '+100%' : '-100%';
+	return css`
+		transform: translateX( ${ translateX } );
+	`;
+};
+
+const RTL_DIRECTION = {
+	left: 'right',
+	right: 'left',
 };
 
-export const getRTLSafeXAxis = ( { xAxis } ) => {
+export const appearTransformOrigin = ( { yAxis, xAxis } ) => {
 	const isRTL = getRTL();
 
 	if ( isRTL ) {
-		switch ( xAxis ) {
-			case 'left':
-				return 'right';
-			case 'right':
-				return 'left';
-			default:
-				return xAxis;
-		}
+		// Use opposite values when one exists, otherwise default to the value itself (as in the case of `center`).
+		xAxis = RTL_DIRECTION[ xAxis ] || xAxis;
 	}
 
-	return xAxis;
+	return css`
+		transform-origin: ${ yAxis } ${ xAxis };
+	`;
 };