From fc0f5df6c62a32c04d61ee172ae9b8abdb88797c Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 27 Aug 2019 22:58:25 -0700 Subject: [PATCH] fix: length gauge should respect reduceMotion (#1440) --- src/routes/_components/LengthGauge.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/routes/_components/LengthGauge.html b/src/routes/_components/LengthGauge.html index 34e6b991..0db36d9e 100644 --- a/src/routes/_components/LengthGauge.html +++ b/src/routes/_components/LengthGauge.html @@ -1,4 +1,4 @@ - @@ -20,6 +20,7 @@ import { store } from '../_store/store' import { observe } from 'svelte-extras' import { throttleTimer } from '../_utils/throttleTimer' + import { classname } from '../_utils/classname' const updateDisplayedLength = process.browser && throttleTimer(requestAnimationFrame) @@ -50,6 +51,11 @@ const int = Math.round(Math.min(max, length) / max * 100) return (int - (int % 2)) / 100 }, + computedClass: ({ shouldAnimate, overLimit, $reduceMotion }) => classname( + 'length-gauge', + !$reduceMotion && shouldAnimate && 'should-animate', + overLimit && 'over-char-limit' + ), computedStyle: ({ style, lengthAsFractionDeferred }) => `transform: scaleX(${lengthAsFractionDeferred}); ${style}` }, methods: {