Function useEnterAnimation

packages/react-aria/src/utils/animation.ts:17–46

(
  ref: RefObject<HTMLElement | null>,
  isReady: boolean = true
)

import {useLayoutEffect} from './useLayoutEffect';

export function useEnterAnimation(
  ref: RefObject<HTMLElement | null>,
  isReady: boolean = true
): boolean {
  let [isEntering, setEntering] = useState(true);
  let isAnimationReady = isEntering && isReady;

  // There are two cases for entry animations:
  // 1. CSS @keyframes. The `animation` property is set during the isEntering state, and it is removed after the animation finishes.
  // 2. CSS transitions. The initial styles are applied during the isEntering state, and removed immediately, causing the transition to occur.
  //
  // In the second case, cancel any transitions that were triggered prior to the isEntering = false state (when the transition is supposed to start).
  // This can happen when isReady starts as false (e.g. popovers prior to placement calculation).
  useLayoutEffect(() => {
    if (isAnimationReady && ref.current && 'getAnimations' in ref.current) {
      for (let animation of ref.current.getAnimations()) {
        if (animation instanceof CSSTransition) {
          animation.cancel();
        }
      }
    }
  }, [ref, isAnimationReady]);

  useAnimation(
    ref,
    isAnimationReady,
    useCallback(() => setEntering(false), [])
  );
  return isAnimationReady;
}

export function useExitAnimation(ref: RefObject<HTMLElement | null>, isOpen: boolean): boolean {
  let [exitState, setExitState] = useState<'closed' | 'open' | 'exiting'>(