Transition directive (transition:fade) in Svelte - Mini Project: Build & Apply

Fade In and Out with Svelte Transition Directive

📖 Scenario: You are building a simple Svelte app where a message appears and disappears smoothly when you toggle a button.

🎯 Goal: Create a Svelte component that shows a message with a fade transition when a button is clicked.

📋 What You'll Learn

Create a boolean variable showMessage to control visibility

Add a button that toggles showMessage

Use the transition:fade directive on the message element

Import fade from svelte/transition

💡 Why This Matters

🌍 Real World

Transitions like fade are common in web apps to make UI changes smooth and visually appealing, improving user experience.

💼 Career

Knowing how to use Svelte's transition directives helps build interactive, polished front-end components that employers value.

1

Set up the showMessage variable

Create a boolean variable called showMessage and set it to false.

Svelte

# Your code here

// Your code here

Hint

Use let showMessage = false; inside the <script> tag.

2

Add a button to toggle showMessage

Add a <button> element that toggles the showMessage variable when clicked using on:click.

Svelte

  let showMessage = false;

Hint

Use <button on:click={() => showMessage = !showMessage}> to toggle the variable.

3

Import fade and apply transition:fade

Import fade from svelte/transition and use the transition:fade directive on a <p> element that shows the text "Hello, Svelte!" only when showMessage is true.

Svelte

  let showMessage = false;
  // Import fade here


 showMessage = !showMessage}>
  Toggle Message

Hint

Use import { fade } from 'svelte/transition'; and wrap the message in {#if showMessage} block with transition:fade.

4

Complete the component with accessible button label

Add an aria-pressed attribute to the button that reflects the showMessage state for accessibility.

Svelte

  import { fade } from 'svelte/transition';
  let showMessage = false;



 showMessage = !showMessage}>
  Toggle Message


{#if showMessage}
  Hello, Svelte!
{/if}

Hint

Add aria-pressed={showMessage} inside the <button> tag for better accessibility.

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