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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 33x 33x 33x 33x 33x 33x 33x 33x 932x 932x 932x 72x 412x 206x 206x 206x 52x 52x 52x | import { useContext, useEffect } from "react" import { isAnimationControls } from "../../animation/utils/is-animation-controls" import { usePresence } from "../../components/AnimatePresence/use-presence" import { PresenceContext } from "../../context/PresenceContext" import { createAnimationState } from "../../render/utils/animation-state" import { AnimationType } from "../../render/utils/types" import { makeRenderlessComponent } from "../utils/make-renderless-component" import { FeatureComponents, FeatureProps } from "./types" export const animations: FeatureComponents = { animation: makeRenderlessComponent( ({ visualElement, animate }: FeatureProps) => { /** * We dynamically generate the AnimationState manager as it contains a reference * to the underlying animation library. We only want to load that if we load this, * so people can optionally code split it out using the `m` component. */ visualElement.animationState ||= createAnimationState(visualElement) /** * Subscribe any provided AnimationControls to the component's VisualElement */ if (isAnimationControls(animate)) { useEffect(() => animate.subscribe(visualElement), [animate]) } } ), exit: makeRenderlessComponent((props: FeatureProps) => { const { custom, visualElement } = props const [isPresent, safeToRemove] = usePresence() const presenceContext = useContext(PresenceContext) useEffect(() => { visualElement.isPresent = isPresent const animation = visualElement.animationState?.setActive( AnimationType.Exit, !isPresent, { custom: presenceContext?.custom ?? custom } ) !isPresent && animation?.then(safeToRemove) }, [isPresent]) }), } |