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.