In and out transitions in Svelte - Step-by-Step Execution

Concept Flow - In and out transitions

Component Mounts

↓

Apply 'in' Transition

↓

Element Visible

↓

Trigger Removal

↓

Apply 'out' Transition

↓

Element Removed from DOM

When a component or element appears, Svelte runs the 'in' transition. When it disappears, it runs the 'out' transition before removing it.

Execution Sample

Svelte

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

<button on:click={() => visible = !visible}>Toggle</button>

{#if visible}
  <p in:fade out:fade>Hello!</p>
{/if}

This code toggles a paragraph with fade in and fade out transitions when the button is clicked.

Execution Table

Step	Action	visible	Transition Applied	Element State
1	Initial render	false	None	Paragraph not in DOM
2	Click button to toggle visible	true	in:fade starts	Paragraph fading in
3	Fade in completes	true	in:fade ends	Paragraph fully visible
4	Click button to toggle visible	false	out:fade starts	Paragraph fading out
5	Fade out completes	false	out:fade ends	Paragraph removed from DOM

💡 Element removed after out transition completes when visible becomes false

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
visible	false	true	false	false

Key Moments - 2 Insights

Why does the paragraph stay visible briefly after clicking to hide it?

Because the 'out' transition runs before the element is removed from the DOM, as shown in steps 4 and 5 of the execution_table.

What happens if we remove the 'out:fade' directive?

The paragraph disappears immediately without fading out, skipping the 'out' transition phase in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'visible' when the 'in:fade' transition starts?

A false

B true

C undefined

D null

💡 Hint

Check Step 2 in the execution_table where 'in:fade starts' and 'visible' value is shown.

At which step does the paragraph get removed from the DOM?

A Step 5

B Step 4

C Step 3

D Step 2

💡 Hint

Look for 'Paragraph removed from DOM' in the Element State column of the execution_table.

If we toggle 'visible' from false to true, which transition runs?

A out:fade

B no transition

C in:fade

D both in:fade and out:fade

💡 Hint

See Step 2 in execution_table where 'in:fade starts' happens when visible becomes true.

Concept Snapshot

Svelte 'in' and 'out' transitions animate elements entering and leaving the DOM.
Use directives like in:fade and out:fade on elements.
'in' runs when element appears; 'out' runs before removal.
Transitions keep UI smooth and visually clear.
Toggle visibility with a boolean and wrap element in {#if} block.

Full Transcript

In Svelte, when you show or hide an element using a boolean, you can add animations called transitions. The 'in' transition runs when the element appears, making it fade or slide in smoothly. The 'out' transition runs when the element disappears, animating it out before removing it from the page. For example, using in:fade and out:fade on a paragraph toggled by a button, the paragraph fades in when visible becomes true and fades out before it is removed when visible becomes false. This keeps the UI feeling smooth and natural. The execution table shows each step: initial hidden state, fade in start and end, fade out start and end, and finally removal from the DOM. This helps beginners see exactly when transitions happen and how the element state changes.