Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 30x 30x 30x 30x 30x 30x 18x 18x 18x 4x 4x 18x 2x 2x 2x 2x | import sync from "framesync" import { useEffect } from "react" import { useInstantLayoutTransition } from "../projection/use-instant-layout-transition" import { useForceUpdate } from "./use-force-update" import { instantAnimationState } from "./use-instant-transition-state" export function useInstantTransition() { const [forceUpdate, forcedRenderCount] = useForceUpdate() const startInstantLayoutTransition = useInstantLayoutTransition() useEffect(() => { /** * Unblock after two animation frames, otherwise this will unblock too soon. */ sync.postRender(() => sync.postRender(() => (instantAnimationState.current = false)) ) }, [forcedRenderCount]) return (callback: () => void) => { startInstantLayoutTransition(() => { instantAnimationState.current = true forceUpdate() callback() }) } } |