···

       
2
       
 
       
import { useState, useCallback } from 'react';

     

       
3
       
 
       
import { useLayoutEffect } from './utils/react';

     

       
4
       
 
       


     

       
5
       
-
       
interface AnimationState {

     

       
6
       
-
       
  animation: Animation;

     

       
7
       
-
       
  to: Keyframe;

     

       
8
       
-
       
}

     

       
9
       
-
       


     

       
10
       
-
       
const animations = new WeakMap<HTMLElement, AnimationState>();

     

       
11
       
 
       


     

       
12
       
 
       
export interface TransitionOptions {

     

       
13
       
-
       
  style: Style;

     

       
14
       
 
       
  duration?: number | string;

     

       
15
       
 
       
  easing?: string | [number, number, number, number];

     

       
16
       
 
       
}

     

       
17
       
 
       


     

       
18
       
 
       
const animate = (element: HTMLElement, options: TransitionOptions) => {

     

       
19
       
-
       
  const prevState = animations.get(element);

     

       
20
       
-
       
  const prevTo = prevState ? prevState.to : {};

     

       
21
       
 
       
  const computed = getComputedStyle(element);

     

       
22
       
 
       
  const from: Keyframe = {};

     

       
23
       
 
       
  const to: Keyframe = {};

     

       
24
       
 
       


     

       
25
       
-
       
  let changed = !prevState;

     

       
26
       
-
       
  for (const propName in options.style) {

     

       
27
       
-
       
    let value: string = options.style[propName];

     

       
28
       
 
       
    if (typeof value === 'number') (value as string) += 'px';

     

       
29
       
 
       


     

       
30
       
 
       
    let key: string;

     

       
31
       
 
       
    if (/^--/.test(propName)) {

     

       
32
       
 
       
      key = propName;

     

       
33
       
 
       
      from[key] = element.style.getPropertyValue(propName);

     

       
34
       
-
       
      element.style.setProperty(key, (to[key] = options.style[propName]));

     

       
35
       
 
       
    } else {

     

       
36
       
-
       
      if (propName === 'float') {

     

       
37
       
-
       
        key = 'cssFloat';

     

       
38
       
-
       
      } else if (propName === 'offset') {

     

       
39
       
-
       
        key = 'cssOffset';

     

       
40
       
-
       
      } else if (propName === 'transform') {

     

       
41
       
 
       
        key = propName;

     

       
42
       
 
       
        value =

     

       
43
       
 
       
          ('' + value || '').replace(/\w+\((?:0\w*\s*)+\)\s*/g, '') || 'none';

     
···

       
48
       
 
       
      from[key] = computed[key];

     

       
49
       
 
       
      element.style[key] = to[key] = value;

     

       
50
       
 
       
    }

     

       
51
       
-
       


     

       
52
       
-
       
    changed = changed || prevState!.to[key] !== to[key];

     

       
53
       
 
       
  }

     

       
54
       
-
       


     

       
55
       
-
       
  if (!changed && Object.keys(to).length === Object.keys(prevTo).length) return;

     

       
56
       
 
       


     

       
57
       
 
       
  const effect: KeyframeEffectOptions = {

     

       
58
       
 
       
    duration:

     

       
59
       
 
       
      typeof options.duration === 'number'

     

       
60
       
 
       
        ? options.duration * 1000

     

       
61
       
-
       
        : options.duration,

     

       
62
       
 
       
    easing: Array.isArray(options.easing)

     

       
63
       
 
       
      ? `cubic-bezier(${options.easing.join(', ')})`

     

       
64
       
-
       
      : options.easing,

     

       
65
       
 
       
  };

     

       
66
       
 
       


     

       
67
       
-
       
  if (prevState) prevState.animation.cancel();

     

       
0
       
 
       

     

       
68
       
 
       


     

       
69
       
 
       
  const animation = element.animate([from, to], effect);

     

       
70
       
 
       
  animation.playbackRate = 1.000001;

     
···

       
88
       
 
       
  }

     

       
89
       
 
       


     

       
90
       
 
       
  return new Promise<unknown>((resolve, reject) => {

     

       
91
       
-
       
    animations.set(element, { animation, to });

     

       
92
       
 
       
    animation.addEventListener('cancel', reject);

     

       
93
       
 
       
    animation.addEventListener('finish', resolve);

     

       
94
       
 
       
  });

     
···

       
96
       
 
       


     

       
97
       
 
       
export function useTransition<T extends HTMLElement>(

     

       
98
       
 
       
  ref: Ref<T>,

     

       
99
       
-
       
  options: TransitionOptions

     

       
100
       
 
       
): [boolean, (options: TransitionOptions) => Promise<void>] {

     

       
101
       
-
       
  const [animating, setAnimating] = useState(false);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
102
       
 
       


     

       
103
       
 
       
  const animateTo = useCallback(

     

       
104
       
 
       
    (options: TransitionOptions) => {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
105
       
 
       
      const animation = animate(ref.current!, options);

     

       
106
       
 
       
      if (animation) {

     

       
107
       
-
       
        setAnimating(true);

     

       
108
       
 
       
        return animation

     

       
109
       
 
       
          .then(() => {

     

       
110
       
-
       
            setAnimating(false);

     

       
111
       
 
       
          })

     

       
112
       
 
       
          .catch(() => {});

     

       
113
       
 
       
      } else {

     

       
0
       
 
       

     

       
114
       
 
       
        return Promise.resolve();

     

       
115
       
 
       
      }

     

       
116
       
 
       
    },

     
···

       
118
       
 
       
  );

     

       
119
       
 
       


     

       
120
       
 
       
  useLayoutEffect(() => {

     

       
121
       
-
       
    animateTo(options);

     

       
122
       
-
       
  }, [animateTo, options.style]);

     

       
123
       
 
       


     

       
124
       
-
       
  return [animating, animateTo];

     

       
125
       
 
       
}

     

···

       
2
       
 
       
import { useState, useCallback } from 'react';

     

       
3
       
 
       
import { useLayoutEffect } from './utils/react';

     

       
4
       
 
       


     

       
5
       
+
       
const animations = new WeakMap<HTMLElement, Animation>();

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
6
       
 
       


     

       
7
       
 
       
export interface TransitionOptions {

     

       
8
       
+
       
  style?: Style | null;

     

       
9
       
 
       
  duration?: number | string;

     

       
10
       
 
       
  easing?: string | [number, number, number, number];

     

       
11
       
 
       
}

     

       
12
       
 
       


     

       
13
       
 
       
const animate = (element: HTMLElement, options: TransitionOptions) => {

     

       
14
       
+
       
  const style = options.style || {};

     

       
0
       
 
       

     

       
15
       
 
       
  const computed = getComputedStyle(element);

     

       
16
       
 
       
  const from: Keyframe = {};

     

       
17
       
 
       
  const to: Keyframe = {};

     

       
18
       
 
       


     

       
19
       
+
       
  for (const propName in style) {

     

       
20
       
+
       
    let value: string = style[propName];

     

       
0
       
 
       

     

       
21
       
 
       
    if (typeof value === 'number') (value as string) += 'px';

     

       
22
       
 
       


     

       
23
       
 
       
    let key: string;

     

       
24
       
 
       
    if (/^--/.test(propName)) {

     

       
25
       
 
       
      key = propName;

     

       
26
       
 
       
      from[key] = element.style.getPropertyValue(propName);

     

       
27
       
+
       
      element.style.setProperty(key, (to[key] = value));

     

       
28
       
 
       
    } else {

     

       
29
       
+
       
      if (propName === 'transform') {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
30
       
 
       
        key = propName;

     

       
31
       
 
       
        value =

     

       
32
       
 
       
          ('' + value || '').replace(/\w+\((?:0\w*\s*)+\)\s*/g, '') || 'none';

     
···

       
37
       
 
       
      from[key] = computed[key];

     

       
38
       
 
       
      element.style[key] = to[key] = value;

     

       
39
       
 
       
    }

     

       
0
       
 
       

     

       
0
       
 
       

     

       
40
       
 
       
  }

     

       
0
       
 
       

     

       
0
       
 
       

     

       
41
       
 
       


     

       
42
       
 
       
  const effect: KeyframeEffectOptions = {

     

       
43
       
 
       
    duration:

     

       
44
       
 
       
      typeof options.duration === 'number'

     

       
45
       
 
       
        ? options.duration * 1000

     

       
46
       
+
       
        : options.duration || 1000,

     

       
47
       
 
       
    easing: Array.isArray(options.easing)

     

       
48
       
 
       
      ? `cubic-bezier(${options.easing.join(', ')})`

     

       
49
       
+
       
      : options.easing || 'ease',

     

       
50
       
 
       
  };

     

       
51
       
 
       


     

       
52
       
+
       
  const prevAnimation = animations.get(element);

     

       
53
       
+
       
  if (prevAnimation) prevAnimation.cancel();

     

       
54
       
 
       


     

       
55
       
 
       
  const animation = element.animate([from, to], effect);

     

       
56
       
 
       
  animation.playbackRate = 1.000001;

     
···

       
74
       
 
       
  }

     

       
75
       
 
       


     

       
76
       
 
       
  return new Promise<unknown>((resolve, reject) => {

     

       
77
       
+
       
    animations.set(element, animation);

     

       
78
       
 
       
    animation.addEventListener('cancel', reject);

     

       
79
       
 
       
    animation.addEventListener('finish', resolve);

     

       
80
       
 
       
  });

     
···

       
82
       
 
       


     

       
83
       
 
       
export function useTransition<T extends HTMLElement>(

     

       
84
       
 
       
  ref: Ref<T>,

     

       
85
       
+
       
  options?: TransitionOptions

     

       
86
       
 
       
): [boolean, (options: TransitionOptions) => Promise<void>] {

     

       
87
       
+
       
  if (!options) options = {};

     

       
88
       
+
       


     

       
89
       
+
       
  const style = options.style || {};

     

       
90
       
+
       
  const [state, setState] = useState<[boolean, Style]>([false, style]);

     

       
91
       
+
       
  if (JSON.stringify(style) !== JSON.stringify(state[1])) {

     

       
92
       
+
       
    setState([true, style]);

     

       
93
       
+
       
  }

     

       
94
       
 
       


     

       
95
       
 
       
  const animateTo = useCallback(

     

       
96
       
 
       
    (options: TransitionOptions) => {

     

       
97
       
+
       
      const updateAnimating = (animating: boolean) => {

     

       
98
       
+
       
        setState(state =>

     

       
99
       
+
       
          state[0] !== animating ? [animating, state[1]] : state

     

       
100
       
+
       
        );

     

       
101
       
+
       
      };

     

       
102
       
+
       


     

       
103
       
 
       
      const animation = animate(ref.current!, options);

     

       
104
       
 
       
      if (animation) {

     

       
105
       
+
       
        updateAnimating(true);

     

       
106
       
 
       
        return animation

     

       
107
       
 
       
          .then(() => {

     

       
108
       
+
       
            updateAnimating(false);

     

       
109
       
 
       
          })

     

       
110
       
 
       
          .catch(() => {});

     

       
111
       
 
       
      } else {

     

       
112
       
+
       
        updateAnimating(false);

     

       
113
       
 
       
        return Promise.resolve();

     

       
114
       
 
       
      }

     

       
115
       
 
       
    },

     
···

       
117
       
 
       
  );

     

       
118
       
 
       


     

       
119
       
 
       
  useLayoutEffect(() => {

     

       
120
       
+
       
    animateTo(options!);

     

       
121
       
+
       
  }, [animateTo, state[1]]);

     

       
122
       
 
       


     

       
123
       
+
       
  return [state[0], animateTo];

     

       
124
       
 
       
}