fix: reduce motion disables nav indicator animation (#1523)

fixes #1521
This commit is contained in:
Nolan Lawson 2019-09-24 00:28:40 -07:00 committed by GitHub
parent 3d58c86963
commit 488e87bda1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -107,36 +107,19 @@
export default { export default {
oncreate () { oncreate () {
const { name } = this.get()
const indicator = this.refs.indicator
on('animateNavPart1', this, ({ fromPage, toPage }) => { on('animateNavPart1', this, ({ fromPage, toPage }) => {
if (fromPage !== name) { const { name } = this.get()
return const { reduceMotion } = this.store.get()
if (fromPage === name && !reduceMotion) {
this.animatePart1({ toPage })
} }
mark('animateNavPart1 gBCR')
const fromRect = indicator.getBoundingClientRect()
stop('animateNavPart1 gBCR')
emit('animateNavPart2', { fromRect, fromPage, toPage })
}) })
on('animateNavPart2', this, ({ fromPage, fromRect, toPage }) => { on('animateNavPart2', this, ({ toPage, fromRect }) => {
if (toPage !== name) { const { name } = this.get()
return const { reduceMotion } = this.store.get()
if (toPage === name && !reduceMotion) {
this.animatePart2({ fromRect })
} }
mark('animateNavPart2 gBCR')
const toRect = indicator.getBoundingClientRect()
stop('animateNavPart2 gBCR')
const translateX = fromRect.left - toRect.left
const scaleX = fromRect.width / toRect.width
indicator.style.transform = `translateX(${translateX}px) scaleX(${scaleX})`
const onTransitionEnd = () => {
indicator.removeEventListener('transitionend', onTransitionEnd)
indicator.classList.remove('animate')
}
indicator.addEventListener('transitionend', onTransitionEnd)
doubleRAF(() => {
indicator.classList.add('animate')
indicator.style.transform = ''
})
}) })
}, },
store: () => store, store: () => store,
@ -175,6 +158,31 @@
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
} }
},
animatePart1 ({ toPage }) {
const indicator = this.refs.indicator
mark('animateNavPart1 gBCR')
const fromRect = indicator.getBoundingClientRect()
stop('animateNavPart1 gBCR')
emit('animateNavPart2', { fromRect, toPage })
},
animatePart2 ({ fromRect }) {
const indicator = this.refs.indicator
mark('animateNavPart2 gBCR')
const toRect = indicator.getBoundingClientRect()
stop('animateNavPart2 gBCR')
const translateX = fromRect.left - toRect.left
const scaleX = fromRect.width / toRect.width
indicator.style.transform = `translateX(${translateX}px) scaleX(${scaleX})`
const onTransitionEnd = () => {
indicator.removeEventListener('transitionend', onTransitionEnd)
indicator.classList.remove('animate')
}
indicator.addEventListener('transitionend', onTransitionEnd)
doubleRAF(() => {
indicator.classList.add('animate')
indicator.style.transform = ''
})
} }
}, },
components: { components: {