|
11 | 11 | */ |
12 | 12 |
|
13 | 13 | import {flushSync} from 'react-dom'; |
14 | | -import {RefObject, useCallback, useRef, useState} from 'react'; |
| 14 | +import {RefObject, useCallback, useState} from 'react'; |
15 | 15 | import {useLayoutEffect} from './useLayoutEffect'; |
16 | 16 |
|
17 | 17 | export function useEnterAnimation(ref: RefObject<HTMLElement | null>, isReady: boolean = true) { |
18 | 18 | let [isEntering, setEntering] = useState(true); |
19 | | - useAnimation(ref, isEntering && isReady, useCallback(() => setEntering(false), [])); |
20 | | - return isEntering && isReady; |
| 19 | + let isAnimationReady = isEntering && isReady; |
| 20 | + |
| 21 | + // There are two cases for entry animations: |
| 22 | + // 1. CSS @keyframes. The `animation` property is set during the isEntering state, and it is removed after the animation finishes. |
| 23 | + // 2. CSS transitions. The initial styles are applied during the isEntering state, and removed immediately, causing the transition to occur. |
| 24 | + // |
| 25 | + // In the second case, cancel any transitions that were triggered prior to the isEntering = false state (when the transition is supposed to start). |
| 26 | + // This can happen when isReady starts as false (e.g. popovers prior to placement calculation). |
| 27 | + useLayoutEffect(() => { |
| 28 | + if (isAnimationReady && ref.current && 'getAnimations' in ref.current) { |
| 29 | + for (let animation of ref.current.getAnimations()) { |
| 30 | + if (animation instanceof CSSTransition) { |
| 31 | + animation.cancel(); |
| 32 | + } |
| 33 | + } |
| 34 | + } |
| 35 | + }, [ref, isAnimationReady]); |
| 36 | + |
| 37 | + useAnimation(ref, isAnimationReady, useCallback(() => setEntering(false), [])); |
| 38 | + return isAnimationReady; |
21 | 39 | } |
22 | 40 |
|
23 | 41 | export function useExitAnimation(ref: RefObject<HTMLElement | null>, isOpen: boolean) { |
24 | | - // State to trigger a re-render after animation is complete, which causes the element to be removed from the DOM. |
25 | | - // Ref to track the state we're in, so we don't immediately reset isExiting to true after the animation. |
26 | | - let [isExiting, setExiting] = useState(false); |
27 | | - let [exitState, setExitState] = useState('idle'); |
| 42 | + let [exitState, setExitState] = useState<'closed' | 'open' | 'exiting'>(isOpen ? 'open' : 'closed'); |
28 | 43 |
|
29 | | - // If isOpen becomes false, set isExiting to true. |
30 | | - if (!isOpen && ref.current && exitState === 'idle') { |
31 | | - isExiting = true; |
32 | | - setExiting(true); |
33 | | - setExitState('exiting'); |
34 | | - } |
35 | | - |
36 | | - // If we exited, and the element has been removed, reset exit state to idle. |
37 | | - if (!ref.current && exitState === 'exited') { |
38 | | - setExitState('idle'); |
| 44 | + switch (exitState) { |
| 45 | + case 'open': |
| 46 | + // If isOpen becomes false, set the state to exiting. |
| 47 | + if (!isOpen) { |
| 48 | + setExitState('exiting'); |
| 49 | + } |
| 50 | + break; |
| 51 | + case 'closed': |
| 52 | + case 'exiting': |
| 53 | + // If we are exiting and isOpen becomes true, the animation was interrupted. |
| 54 | + // Reset the state to open. |
| 55 | + if (isOpen) { |
| 56 | + setExitState('open'); |
| 57 | + } |
| 58 | + break; |
39 | 59 | } |
40 | 60 |
|
| 61 | + let isExiting = exitState === 'exiting'; |
41 | 62 | useAnimation( |
42 | 63 | ref, |
43 | 64 | isExiting, |
44 | 65 | useCallback(() => { |
45 | | - setExitState('exited'); |
46 | | - setExiting(false); |
| 66 | + // Set the state to closed, which will cause the element to be unmounted. |
| 67 | + setExitState(state => state === 'exiting' ? 'closed' : state); |
47 | 68 | }, []) |
48 | 69 | ); |
49 | 70 |
|
50 | 71 | return isExiting; |
51 | 72 | } |
52 | 73 |
|
53 | 74 | function useAnimation(ref: RefObject<HTMLElement | null>, isActive: boolean, onEnd: () => void) { |
54 | | - let prevAnimation = useRef<string | null>(null); |
55 | | - if (isActive && ref.current) { |
56 | | - // This is ok because we only read it in the layout effect below, immediately after the commit phase. |
57 | | - // We could move this to another effect that runs every render, but this would be unnecessarily slow. |
58 | | - // We only need the computed style right before the animation becomes active. |
59 | | - // eslint-disable-next-line rulesdir/pure-render |
60 | | - prevAnimation.current = window.getComputedStyle(ref.current).animation; |
61 | | - } |
62 | | - |
63 | 75 | useLayoutEffect(() => { |
64 | 76 | if (isActive && ref.current) { |
65 | | - // Make sure there's actually an animation, and it wasn't there before we triggered the update. |
66 | | - let computedStyle = window.getComputedStyle(ref.current); |
67 | | - if (computedStyle.animationName && computedStyle.animationName !== 'none' && computedStyle.animation !== prevAnimation.current) { |
68 | | - let onAnimationEnd = (e: AnimationEvent) => { |
69 | | - if (e.target === ref.current) { |
70 | | - element.removeEventListener('animationend', onAnimationEnd); |
71 | | - flushSync(() => {onEnd();}); |
72 | | - } |
73 | | - }; |
74 | | - |
75 | | - let element = ref.current; |
76 | | - element.addEventListener('animationend', onAnimationEnd); |
77 | | - return () => { |
78 | | - element.removeEventListener('animationend', onAnimationEnd); |
79 | | - }; |
80 | | - } else { |
| 77 | + if (!('getAnimations' in ref.current)) { |
| 78 | + // JSDOM |
81 | 79 | onEnd(); |
| 80 | + return; |
82 | 81 | } |
| 82 | + |
| 83 | + let animations = ref.current.getAnimations(); |
| 84 | + if (animations.length === 0) { |
| 85 | + onEnd(); |
| 86 | + return; |
| 87 | + } |
| 88 | + |
| 89 | + let canceled = false; |
| 90 | + Promise.all(animations.map(a => a.finished)).then(() => { |
| 91 | + if (!canceled) { |
| 92 | + flushSync(() => { |
| 93 | + onEnd(); |
| 94 | + }); |
| 95 | + } |
| 96 | + }).catch(() => {}); |
| 97 | + |
| 98 | + return () => { |
| 99 | + canceled = true; |
| 100 | + }; |
83 | 101 | } |
84 | 102 | }, [ref, isActive, onEnd]); |
85 | 103 | } |
0 commit comments