Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637<script lang="ts"> import { tick, untrack } from "svelte";
interface Props { value: string; class?: string; }
let { value, class: className }: Props = $props();
let el: HTMLSpanElement | undefined = $state(); let shown = $state(untrack(() => value)); let phase = $state<"exit" | "enter" | undefined>();
$effect(() => { const next = value; if (!el || next === shown) return;
const dur = parseFloat(getComputedStyle(el).getPropertyValue("--text-swap-dur")) || 150;
phase = "exit"; const timer = setTimeout(() => { void (async () => { shown = next; phase = "enter"; await tick(); void el?.offsetHeight; phase = undefined; })(); }, dur);
return () => clearTimeout(timer); });</script>
<span bind:this={el} class="text-swap {className ?? ''}" data-swap={phase}>{shown}</span>