fix: length gauge should respect reduceMotion (#1440)

This commit is contained in:
Nolan Lawson 2019-08-27 22:58:25 -07:00 committed by GitHub
parent f6981cff01
commit fc0f5df6c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 1 deletions

View File

@ -1,4 +1,4 @@
<div class="length-gauge {shouldAnimate ? 'should-animate' : ''} {overLimit ? 'over-char-limit' : ''}"
<div class={computedClass}
style={computedStyle}
aria-hidden="true"
></div>
@ -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: {