Transition directive (transition:fade) in Svelte - Step-by-Step Execution

Concept Flow - Transition directive (transition:fade)

Component loads

↓

Element appears

↓

Apply transition:fade

↓

Opacity changes 0 -> 1

↓

Element fully visible

↓

Element removed

↓

Apply transition:fade

↓

Opacity changes 1 -> 0

↓

Element removed from DOM

When an element appears or disappears, the fade transition smoothly changes its opacity from 0 to 1 or 1 to 0.

Execution Sample

Svelte

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

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

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

This code toggles a paragraph with a fade effect on show and hide.

Execution Table

Step	Action	visible	Element State	Opacity	Transition Applied
1	Initial load	false	No <p>	N/A	No
2	Click button to show	true	<p> created	0 (start fade in)	fade in starts
3	Fade in progress	true	<p> visible	0.5 (mid fade)	fade in ongoing
4	Fade in complete	true	<p> visible	1 (fully visible)	fade in ends
5	Click button to hide	false	<p> visible	1 (start fade out)	fade out starts
6	Fade out progress	false	<p> visible	0.5 (mid fade)	fade out ongoing
7	Fade out complete	false	<p> removed	0 (invisible)	fade out ends

💡 Element is removed after opacity reaches 0 on fade out.

Variable Tracker

Variable	Start	After Step 2	After Step 5	Final
visible	false	true	false	false
Opacity	N/A	0 (fade in start)	1 (fade out start)	0 (fade out end)
Element State	No <p>	<p> created	<p> visible	No <p>

Key Moments - 2 Insights

Why does the element still exist during fade out even though visible is false?

Because the fade transition keeps the element in the DOM while opacity changes from 1 to 0, as shown in execution_table steps 5-7.

What happens if you remove transition:fade from the element?

The element appears or disappears instantly without opacity changes, skipping the fade steps in the execution_table.

Visual Quiz - 3 Questions

Look at the execution table, what is the opacity value at step 3?

A 0.5

B 1

C 0

D N/A

💡 Hint

Check the 'Opacity' column in execution_table row for step 3.

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

A Step 4

B Step 2

C Step 7

D Step 1

💡 Hint

Look at the 'Element State' column in execution_table for when

is removed.

If visible stayed true, what would happen to the fade transition steps?

A Fade in would repeat continuously

B Fade out steps would not occur

C Element would be removed immediately

D Opacity would stay at 0

💡 Hint

Refer to variable_tracker and execution_table steps where visible changes to false triggers fade out.

Concept Snapshot

Svelte's transition:fade smoothly changes an element's opacity from 0 to 1 on enter and 1 to 0 on leave.
Use it inside {#if} blocks to animate showing/hiding.
The element stays in the DOM during fade out until fully transparent.
Syntax: <element transition:fade>.
You can customize duration and easing if needed.
Great for gentle appear/disappear effects.

Full Transcript

This visual execution shows how Svelte's transition:fade works step-by-step. When the component loads, the paragraph is hidden. Clicking the button sets visible to true, creating the paragraph with opacity starting at 0. The fade transition gradually increases opacity to 1, making it fully visible. When clicking again, visible becomes false, but the paragraph stays in the DOM while opacity fades from 1 to 0. After fade out completes, the paragraph is removed. Variables tracked include visible, opacity, and element state. Key moments clarify why the element remains during fade out and what happens without the transition. Quiz questions test understanding of opacity values, removal timing, and transition triggers.