···

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

     

       
6
       
 
       


     

       
7
       
 
       
export interface TransitionOptions {

     

       
8
       
-
       
  style?: Style | null;

     

       
0
       
 
       

     

       
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
       
 
       

     

       
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];

     

       
21
       
-
       
    if (typeof value === 'number' && propName !== 'opacity') {

     

       
22
       
-
       
      (value as string) += 'px';

     

       
23
       
-
       
    }

     

       
24
       
-
       


     

       
25
       
 
       
    let key: string;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

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

     

       
27
       
 
       
      key = propName;

     

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

     

       
29
       
-
       
      element.style.setProperty(key, (to[key] = value));

     

       
30
       
 
       
    } else {

     

       
31
       
 
       
      if (propName === 'transform') {

     

       
32
       
 
       
        key = propName;

     
···

       
37
       
 
       
      }

     

       
38
       
 
       


     

       
39
       
 
       
      from[key] = computed[key];

     

       
40
       
-
       
      element.style[key] = to[key] = value;

     

       
41
       
 
       
    }

     

       
0
       
 
       

     

       
0
       
 
       

     

       
42
       
 
       
  }

     

       
43
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
44
       
 
       
  const effect: KeyframeEffectOptions = {

     

       
45
       
 
       
    duration:

     

       
46
       
 
       
      typeof options.duration === 'number'

     
···

       
54
       
 
       
  const prevAnimation = animations.get(element);

     

       
55
       
 
       
  if (prevAnimation) prevAnimation.cancel();

     

       
56
       
 
       


     

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

     

       
0
       
 
       

     

       
0
       
 
       

     

       
58
       
 
       
  animation.playbackRate = 1.000001;

     

       
59
       
 
       
  animation.currentTime = 0.1;

     

       
60
       
 
       


     

       
61
       
 
       
  let animating = false;

     

       
62
       
 
       
  const media = matchMedia('(prefers-reduced-motion: reduce)');

     

       
0
       
 
       

     

       
63
       
 
       
  if (!media.matches) {

     

       
64
       
-
       
    for (const propName in from) {

     

       
65
       
 
       
      const value = /^--/.test(propName)

     

       
66
       
 
       
        ? element.style.getPropertyValue(propName)

     

       
67
       
 
       
        : computed[propName];

     

       
68
       
-
       
      if (value !== from[propName]) {

     

       
69
       
 
       
        animating = true;

     

       
70
       
 
       
        break;

     

       
71
       
 
       
      }

     
···

       
78
       
 
       
    return;

     

       
79
       
 
       
  }

     

       
80
       
 
       


     

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

     

       
82
       
 
       
    animations.set(element, animation);

     

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

     

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

     

       
85
       
 
       
  });

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
86
       
 
       
};

     

       
87
       
 
       


     

       
88
       
 
       
export function useStyleTransition<T extends HTMLElement>(

     
···

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

     

       
92
       
 
       
  if (!options) options = {};

     

       
93
       
 
       


     

       
94
       
-
       
  const style = options.style || {};

     

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

     

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

     

       
97
       
 
       
    setState([true, style]);

     

···

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

     

       
6
       
 
       


     

       
7
       
 
       
export interface TransitionOptions {

     

       
8
       
+
       
  to?: Style | null;

     

       
9
       
+
       
  final?: Style | null;

     

       
10
       
 
       
  duration?: number | string;

     

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

     

       
12
       
 
       
}

     

       
13
       
 
       


     

       
14
       
+
       
const applyKeyframe = (

     

       
15
       
+
       
  element: HTMLElement,

     

       
16
       
+
       
  style: Style

     

       
17
       
+
       
): [Keyframe, Keyframe] => {

     

       
18
       
 
       
  const computed = getComputedStyle(element);

     

       
19
       
 
       
  const from: Keyframe = {};

     

       
20
       
 
       
  const to: Keyframe = {};

     

       
21
       
 
       


     

       
22
       
 
       
  for (const propName in style) {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
23
       
 
       
    let key: string;

     

       
24
       
+
       
    let value: string =

     

       
25
       
+
       
      style[propName] +

     

       
26
       
+
       
      (typeof style[propName] === 'number' && propName !== 'opacity'

     

       
27
       
+
       
        ? 'px'

     

       
28
       
+
       
        : '');

     

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

     

       
30
       
 
       
      key = propName;

     

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

     

       
32
       
+
       
      element.style.setProperty(key, value);

     

       
33
       
 
       
    } else {

     

       
34
       
 
       
      if (propName === 'transform') {

     

       
35
       
 
       
        key = propName;

     
···

       
40
       
 
       
      }

     

       
41
       
 
       


     

       
42
       
 
       
      from[key] = computed[key];

     

       
43
       
+
       
      element.style[key] = value;

     

       
44
       
 
       
    }

     

       
45
       
+
       


     

       
46
       
+
       
    if (from[key] !== value) to[key] = value;

     

       
47
       
 
       
  }

     

       
48
       
 
       


     

       
49
       
+
       
  return [from, to];

     

       
50
       
+
       
};

     

       
51
       
+
       


     

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

     

       
53
       
 
       
  const effect: KeyframeEffectOptions = {

     

       
54
       
 
       
    duration:

     

       
55
       
 
       
      typeof options.duration === 'number'

     
···

       
63
       
 
       
  const prevAnimation = animations.get(element);

     

       
64
       
 
       
  if (prevAnimation) prevAnimation.cancel();

     

       
65
       
 
       


     

       
66
       
+
       
  const keyframes = applyKeyframe(element, options.to || {});

     

       
67
       
+
       
  const animation = element.animate(keyframes, effect);

     

       
68
       
+
       


     

       
69
       
 
       
  animation.playbackRate = 1.000001;

     

       
70
       
 
       
  animation.currentTime = 0.1;

     

       
71
       
 
       


     

       
72
       
 
       
  let animating = false;

     

       
73
       
 
       
  const media = matchMedia('(prefers-reduced-motion: reduce)');

     

       
74
       
+
       
  const computed = getComputedStyle(element);

     

       
75
       
 
       
  if (!media.matches) {

     

       
76
       
+
       
    for (const propName in keyframes[1]) {

     

       
77
       
 
       
      const value = /^--/.test(propName)

     

       
78
       
 
       
        ? element.style.getPropertyValue(propName)

     

       
79
       
 
       
        : computed[propName];

     

       
80
       
+
       
      if (value !== keyframes[0][propName]) {

     

       
81
       
 
       
        animating = true;

     

       
82
       
 
       
        break;

     

       
83
       
 
       
      }

     
···

       
90
       
 
       
    return;

     

       
91
       
 
       
  }

     

       
92
       
 
       


     

       
93
       
+
       
  const promise = new Promise<unknown>((resolve, reject) => {

     

       
94
       
 
       
    animations.set(element, animation);

     

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

     

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

     

       
97
       
 
       
  });

     

       
98
       
+
       


     

       
99
       
+
       
  if (options.final) {

     

       
100
       
+
       
    return promise.then(() => {

     

       
101
       
+
       
      applyKeyframe(element, options.final!);

     

       
102
       
+
       
    });

     

       
103
       
+
       
  }

     

       
104
       
+
       


     

       
105
       
+
       
  return promise;

     

       
106
       
 
       
};

     

       
107
       
 
       


     

       
108
       
 
       
export function useStyleTransition<T extends HTMLElement>(

     
···

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

     

       
112
       
 
       
  if (!options) options = {};

     

       
113
       
 
       


     

       
114
       
+
       
  const style = options.to || {};

     

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

     

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

     

       
117
       
 
       
    setState([true, style]);