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.

Practice

1. What does the transition:fade directive do in Svelte?

easy

A. It instantly hides elements without animation.

B. It moves elements from left to right.

C. It changes the color of elements gradually.

D. It makes elements smoothly appear and disappear by fading.

Solution

1. Step 1: Understand the purpose of transition:fade

   This directive is used to animate elements so they fade in or out smoothly when they appear or disappear.

2. Step 2: Compare with other options

   The options describing movement from left to right and changing color gradually describe different animations, and the option describing instant hiding describes no animation. Only the fading description is correct.

3. Final Answer:

   It makes elements smoothly appear and disappear by fading. -> Option D

4. Quick Check:

   transition:fade = smooth fade in/out [OK]

Hint: Fade means smooth appear/disappear by changing opacity [OK]

Common Mistakes:

• Confusing fade with movement or color change
• Thinking fade hides elements instantly
• Assuming fade only works on text

2. Which of the following is the correct syntax to apply a fade transition with a duration of 500ms to a <div> in Svelte?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall correct object syntax in Svelte transitions

   The options object uses JavaScript object notation with colon and number value, no quotes or units.

2. Step 2: Check each option's syntax

   <div transition:fade={{ duration: 500 }}></div> uses correct syntax: { duration: 500 }. The option with {{duration=500}} uses = instead of :, the option with duration: '500' uses quotes around the number, and the option with duration: 500ms adds invalid 'ms' unit.

3. Final Answer:

   <div transition:fade={{ duration: 500 }}></div> -> Option A

4. Quick Check:

   Use colon and number for options object [OK]

Hint: Use colon and number for options, no quotes or units [OK]

Common Mistakes:

• Using = instead of : in object
• Putting quotes around numeric values
• Adding units like 'ms' inside options

3. Consider this Svelte code snippet:

<script>
  let visible = true;
</script>

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

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

What happens when you click the button?

medium

A. The <div> instantly appears and disappears without animation.

B. Nothing changes because the transition is missing duration.

C. The <div> fades in and out smoothly each time the button is clicked.

D. The <div> slides in from the left when shown.

Solution

1. Step 1: Understand the toggle and transition

   Clicking the button toggles the visible variable, which controls if the <div> is shown or hidden. The transition:fade applies a fade animation on enter and leave.

2. Step 2: Analyze the effect of transition:fade without duration

   By default, fade uses a standard duration, so the <div> fades smoothly in and out on toggle.

3. Final Answer:

   The <div> fades in and out smoothly each time the button is clicked. -> Option C

4. Quick Check:

   transition:fade animates fade in/out on toggle [OK]

Hint: Toggle with fade makes smooth appear/disappear [OK]

Common Mistakes:

• Thinking fade requires explicit duration
• Expecting slide animation instead of fade
• Assuming no animation happens on toggle

4. This Svelte code tries to fade a paragraph but does not work:

<p transition:fade duration=300>Hello</p>

What is the error and how to fix it?

medium

A. Missing curly braces around options object; fix: transition:fade={{ duration: 300 }}

B. Duration value must be a string; fix: duration='300'

C. transition:fade cannot be used on <p> elements; use <div> instead

D. The fade transition requires importing from 'svelte/animate' instead of 'svelte/transition'

Solution

1. Step 1: Identify the syntax error in transition options

   The code uses transition:fade duration=300 which is invalid syntax. Options must be passed as an object inside curly braces.

2. Step 2: Correct syntax for passing options

   The correct way is transition:fade={{ duration: 300 }} with double curly braces and colon.

3. Final Answer:

   Missing curly braces around options object; fix: transition:fade={{ duration: 300 }} -> Option A

4. Quick Check:

   Options need curly braces and colon syntax [OK]

Hint: Options must be inside {{ }} with colon, not bare attributes [OK]

Common Mistakes:

• Passing options without curly braces
• Using = instead of : inside options
• Wrong import source for fade transition

5. You want a list of items to fade in one by one with a 200ms delay between each fade using transition:fade. Which approach correctly applies this in Svelte?

hard

A. Use {#each items as item}<li transition:fade={{ delay: 200 }}>{item}</li>{/each} without index

B. Use {#each items as item, i}<li transition:fade={{ delay: i * 200 }}>{item}</li>{/each}

C. Use {#each items as item}<li transition:fade={{ duration: i * 200 }}>{item}</li>{/each} with duration instead of delay

D. Use {#each items as item}<li transition:fade={{ delay: 200 * items.length }}>{item}</li>{/each} same delay for all

Solution

1. Step 1: Understand how to stagger fade transitions

   To fade items one by one, each item needs a delay increasing by 200ms times its index.

2. Step 2: Check each option's delay usage

   Use {#each items as item, i}<li transition:fade={{ delay: i * 200 }}>{item}</li>{/each} uses the index i to multiply delay, correctly staggering fades. Use {#each items as item}<li transition:fade={{ delay: 200 }}>{item}</li>{/each} without index uses fixed delay, so all fade together. Use {#each items as item}<li transition:fade={{ duration: i * 200 }}>{item}</li>{/each} with duration instead of delay incorrectly uses duration for delay. Use {#each items as item}<li transition:fade={{ delay: 200 * items.length }}>{item}</li>{/each} same delay for all applies same delay to all.

3. Final Answer:

   Use {#each items as item, i}<li transition:fade={{ delay: i * 200 }}>{item}</li>{/each} -> Option B

4. Quick Check:

   Use index-based delay for staggered fade [OK]

Hint: Multiply delay by index to stagger fades [OK]

Common Mistakes:

• Using fixed delay for all items
• Confusing duration with delay
• Not using index in each block