All files / hooks use-flip-animation.ts

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
2x
 
20x
20x
20x
 
20x
20x
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
20x
 
 
import { useRef, useLayoutEffect } from "react";
 
export function useFlipAnimation() {
  const pendingFlip = useRef<number | null>(null);
  const activeCardRef = useRef<HTMLDivElement | null>(null);
 
  useLayoutEffect(() => {
    Eif (pendingFlip.current === null || !activeCardRef.current) return;
    const deltaY = pendingFlip.current - activeCardRef.current.getBoundingClientRect().top;
    pendingFlip.current = null;
    if (Math.abs(deltaY) < 1) return;
    const el = activeCardRef.current;
    const transition = getComputedStyle(document.documentElement).getPropertyValue("--flip-transition").trim();
    Object.assign(el.style, { transition: "none", transform: `translateY(${deltaY}px)` });
    el.getBoundingClientRect();
    Object.assign(el.style, { transition, transform: "translateY(0)" });
    el.addEventListener("transitionend", () => { Object.assign(el.style, { transition: "", transform: "" }); }, { once: true });
  });
 
  function triggerFlip(fromY: number) {
    pendingFlip.current = fromY;
  }
 
  return { activeCardRef, triggerFlip };
}