Loading SvelteCosmos...
“Svelte features built-in transition directives (in:fade, out:fly, transition:slide) that generate pure CSS keyframe animations, alongside use:action directives that hook directly into native DOM node lifecycles.”
Declarative CSS hardware-accelerated animations and reusable element lifecycle directives.
<script>
import { fade, slide } from 'svelte/transition';
let visible = $state(true);
function autofocus(node) {
node.focus();
return {
destroy() { /* cleanup */ }
};
}
</script>
<button onclick={() => visible = !visible}>Toggle</button>
{#if visible}
<div transition:slide={{ duration: 300 }}>
<input use:autofocus transition:fade />
</div>
{/if}Modify the state variable below to watch the signal update the output without VDOM diffing:
Svelte transitions run off the main JavaScript thread via CSS animations, ensuring 60-120fps motion even during heavy compute.