Animation mixin + add `prefers-reduced-motion` support to existing animations (https://github.com/woocommerce/woocommerce-admin/pull/317)

* Add mixin to control transform animation

* Add `prefers-reduced-motion` support to animations

* Fix duration variable

plugins/woocommerce-admin/client/components/animation-slider/style.scss

@@ -68,4 +68,11 @@ The CSSTransition element creates a containing div without a class
 		animation: slide-out-right;
 		animation-duration: $duration;
 	}
+
+	@media screen and (prefers-reduced-motion: reduce) {
+		.slide-enter-active,
+		.slide-exit-active {
+			animation: none !important;
+		}
+	}
 }

plugins/woocommerce-admin/client/components/dropdown-button/style.scss

@@ -20,7 +20,7 @@
 		border-style: solid;
 		border-width: 6px 6px 0 6px;
 		border-color: $core-grey-dark-500 transparent transparent transparent;
-		transition: transform ease 0.2s;
+		@include animate-transform;
 	}
 
 	&.is-open {

plugins/woocommerce-admin/client/components/summary/style.scss

@@ -325,7 +325,7 @@ $inner-border: $core-grey-light-500;
 		position: absolute;
 		top: 44px;
 		right: $gap;
-		transition: transform ease 0.2s;
+		@include animate-transform;
 	}
 
 	.is-dropdown-expanded & {

plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss

@@ -28,6 +28,15 @@
 	}
 }
 
+// Adds animation to transforms
+@mixin animate-transform( $duration: 0.2s ) {
+	transition: transform ease $duration;
+
+	@media screen and (prefers-reduced-motion: reduce) {
+		transition: none;
+	}
+}
+
 // Gutenberg Button variables. These are temporary until Gutenberg's variables are exposed.
 @mixin button-style__focus-active() {
 	background-color: $white;