Bin
2025-12-17 2b99d77d73ba568beff0a549534017caaad8a6de
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
type TransitionOptions = {
  init?: (element: HTMLElement) => void;
  transition: (element: HTMLElement) => void;
  onStart?: (element: HTMLElement) => void;
  beforeTransition?: (element: HTMLElement) => Promise<void> | void;
  afterTransition?: (element: HTMLElement) => Promise<void> | void;
};
 
/**
 * Performs a transition on an element
 */
export const aroundTransition = (
  element: HTMLElement,
  { init, transition, onStart, beforeTransition, afterTransition }: TransitionOptions,
) => {
  return new Promise<void>(async (resolve) => {
    init?.(element);
 
    const onTransitionStarted = () => {
      onStart?.(element);
    };
 
    const onTransitionEnded = async () => {
      await afterTransition?.(element);
 
      element.removeEventListener("transitionstart", onTransitionStarted);
      element.removeEventListener("transitionend", onTransitionEnded);
      element.removeEventListener("transitioncancel", onTransitionEnded);
      resolve();
    };
 
    if (element) {
      element.addEventListener("transitionstart", onTransitionStarted);
      element.addEventListener("transitionend", onTransitionEnded);
      element.addEventListener("transitioncancel", onTransitionEnded);
    }
 
    await beforeTransition?.(element);
 
    setTimeout(() => transition(element), 30);
  });
};