SvelteHow-ToBeginner · 3 min read

How to Use Transition in Svelte: Simple Guide with Examples

In Svelte, you use the transition directive to animate elements when they enter or leave the DOM. Import built-in transitions like fade from 'svelte/transition' and apply them with transition:fade on elements. This makes UI changes smooth and visually appealing with minimal code.

📐

Syntax

The basic syntax to use a transition in Svelte is transition:name, where name is the imported transition function like fade or fly. You apply it directly to an element that appears or disappears.

Example parts:

import { fade } from 'svelte/transition': brings the fade transition function.
<div transition:fade>...</div>: applies fade when the div enters or leaves.
You can pass options like duration: transition:fade={{ duration: 500 }}.

svelte

import { fade } from 'svelte/transition';

// In your component's markup:
// <div transition:fade>Content</div>

💻

Example

This example shows a button that toggles a box with a fade transition. When the box appears or disappears, it smoothly fades in or out.

svelte

<script>
  import { fade } from 'svelte/transition';
  let visible = false;
</script>

<button on:click={() => visible = !visible} aria-pressed={visible} aria-label="Toggle box">
  Toggle Box
</button>

{#if visible}
  <div transition:fade={{ duration: 400 }} style="width: 200px; height: 100px; background: lightblue; margin-top: 10px; display: flex; align-items: center; justify-content: center;">
    I fade in and out!
  </div>
{/if}

Output

A button labeled 'Toggle Box'. When clicked, a light blue box appears or disappears with a smooth fade effect.

⚠️

Common Pitfalls

Some common mistakes when using transitions in Svelte include:

Not importing the transition function before using it.
Applying transition to elements that never enter or leave the DOM (transitions only work on mount/unmount).
Forgetting to wrap the element in an {#if} block to trigger the transition.
Using transitions on elements that are always visible will have no effect.

Example of wrong and right usage:

svelte

<script>
  import { fade } from 'svelte/transition';
  let show = true;
</script>

<!-- Wrong: transition on always visible element -->
<div transition:fade>
  Always visible content (no fade effect)
</div>

<!-- Right: transition on conditional element -->
{#if show}
  <div transition:fade>
    This fades in and out
  </div>
{/if}

📊

Quick Reference

Feature	Description	Example
Import transition	Bring transition function from 'svelte/transition'	import { fade } from 'svelte/transition'
Apply transition	Use `transition:name` on element	...
Pass options	Customize duration, delay, easing	...
Trigger transition	Wrap element in {#if} block for mount/unmount	{#if visible} ... {/if}
Built-in transitions	fade, fly, slide, scale, draw, crossfade	import { fly } from 'svelte/transition'

✅

Key Takeaways

Use transition:name on elements that enter or leave the DOM to animate them.

Always import the transition function from 'svelte/transition' before using it.

Wrap elements in {#if} blocks to trigger transitions on mount and unmount.

Customize transitions by passing options like duration and delay as an object.

Common built-in transitions include fade, fly, slide, and scale.