fix: fix fade animations on slow devices (#1751)

I noticed that, on 6x CPU throttling in Chrome, the status fade-in animations were not consistent when switching columns. This fixes that using rAF.
This commit is contained in:
Nolan Lawson 2020-04-28 17:48:31 -07:00 committed by GitHub
parent 5f6c5d89d1
commit 0ce47f0379
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -29,6 +29,8 @@
import { registerResizeListener, unregisterResizeListener } from '../../_utils/resize'
import { mark, stop } from '../../_utils/marks'
import { requestPostAnimationFrame } from '../../_utils/requestPostAnimationFrame'
import { observe } from 'svelte-extras'
import { doubleRAF } from '../../_utils/doubleRAF'
export default {
oncreate () {
@ -46,15 +48,26 @@
})
this.doRecalculateHeight = this.doRecalculateHeight.bind(this)
registerResizeListener(this.doRecalculateHeight)
// this rAF delay is necessary in order to get the fade-in animation
// to consistently show
this.observe('shownBeforeRaf', shownBeforeRaf => {
doubleRAF(() => {
this.set({ shown: shownBeforeRaf })
})
})
},
ondestroy () {
unregisterResizeListener(this.doRecalculateHeight)
},
store: () => virtualListStore,
data: () => ({
shown: false
}),
computed: {
shown: ({ $itemHeights, key }) => $itemHeights[key] > 0
shownBeforeRaf: ({ $itemHeights, key }) => $itemHeights[key] > 0
},
methods: {
observe,
doRecalculateHeight () {
// Recalculate immediately because this is done on-demand, e.g.
// when clicking the "More" button on a spoiler.