Svelte Transitions: Declarative UI Animation

Why it exists

Manually animating elements entering and leaving the DOM is complex. It often involves adding/removing CSS classes, managing setTimeout calls, and listening for animation-end events just to know when it's safe to remove an element. Svelte transitions abstract this entire process away.

The mental model

Think of Svelte transitions as lifecycle hooks for animation. You tell an element how to animate when it's born (enters the DOM) or when it dies (leaves the DOM), and Svelte handles the timing and cleanup. It's a declarative directive (transition:fade) that attaches a pre-packaged animation behavior to an element's presence in the DOM.

How it works

You import a transition function like fade or fly from svelte/transition. Then, you apply it to an element inside a logic block that controls its presence, like {#if visible}. When visible becomes true, the element is added to the DOM and its in transition runs. When visible becomes false, the out transition runs, and Svelte waits for it to complete before removing the element. You can customize parameters like duration and delay. Built-in transitions include fade, fly (position and opacity), slide, scale, blur, and draw for SVG strokes.

When to use it

Use transitions for any UI element that appears or disappears based on application state. This is perfect for modals, dropdown menus, notifications, and items being added to or removed from a list. The crossfade transition is a powerful, specialized tool for animating an item as it moves from one list to another, like from a 'To Do' column to a 'Done' column.

When not to use it

Transitions are not for animations that happen while an element is already in the DOM. If you want to animate an element's properties in response to state changes (e.g., a progress bar's width), use Svelte's tweened or spring stores. For animating the reordering of items within a list, use the animate: directive. Transitions are strictly for mount and unmount animations.

One canonical example

To make a div fade in and out, first import the function: import { fade } from 'svelte/transition'. Then, control the div's visibility with a state variable inside an {#if} block. Apply the transition to the div: .... When the controlling variable becomes true, the div fades in over 200ms. When it becomes false, the div fades out over 200ms before being removed from the DOM.