Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051import type { TransitionConfig } from "svelte/transition";
interface RevealParams { duration: number; easing: (t: number) => number;}
export const revealWidth = ( node: Element, { duration, easing }: RevealParams): TransitionConfig => { const width = node.getBoundingClientRect().width; return { duration, easing, css: (t) => `overflow: clip; width: ${t * width}px; min-width: 0` };};
export const revealHeight = ( node: Element, { duration, easing }: RevealParams): TransitionConfig => { const height = node.getBoundingClientRect().height; return { duration, easing, css: (t) => `overflow: clip; height: ${t * height}px; min-height: 0; opacity: ${t}` };};
const px = (value: string) => parseFloat(value) || 0;
export const revealItem = ( node: HTMLElement, { duration, easing }: RevealParams): TransitionConfig => { const top = px(getComputedStyle(node).marginTop); const previous = node.previousElementSibling; const gap = previous ? px(getComputedStyle(node.parentElement!).rowGap) + (node.nextElementSibling ? 0 : px(getComputedStyle(previous).marginBottom)) : 0; return { duration, easing, css: (t, u) => `display: grid; grid-template-rows: minmax(0, ${t}fr); margin-top: ${top - u * (top + gap)}px; clip-path: inset(-8px -8px 0 -8px); opacity: ${Math.max(0, (t - 0.2) / 0.8)}; translate: 0 ${u * 8}px` };};