In and out transitions in Svelte - Mini Project: Build & Apply

In and Out Transitions in Svelte

📖 Scenario: You are building a simple Svelte app where a message appears and disappears with smooth animations. This helps users notice changes on the screen in a friendly way.

🎯 Goal: Create a Svelte component that shows a message with an in transition when it appears and an out transition when it disappears. Use Svelte's built-in fade transition.

📋 What You'll Learn

Create a boolean variable called visible to control message visibility

Import the fade transition from svelte/transition

Use the fade transition with in: and out: directives on the message element

Add a button that toggles the visible variable to show or hide the message

💡 Why This Matters

🌍 Real World

Transitions help make web apps feel smooth and polished by animating elements when they appear or disappear.

💼 Career

Knowing how to use transitions in Svelte is useful for frontend developers to improve user experience and interface polish.

1

Set up the visibility variable

Create a boolean variable called visible and set it to true inside the <script> tag.

Svelte

  // Create a boolean variable called visible and set it to true
  // Your code here

Hint

Use let visible = true; inside the <script> tag.

2

Import the fade transition

Import the fade transition from svelte/transition inside the <script> tag below the visible variable.

Svelte

  let visible = true;
  // Import fade transition from svelte/transition
  // Your code here

Hint

Write import { fade } from 'svelte/transition'; inside the <script> tag.

3

Add the message with in and out fade transitions

Add a <p> element that shows the text "Hello, Svelte!" only when visible is true. Use the in:fade and out:fade directives on this <p> element.

Svelte

  let visible = true;
  import { fade } from 'svelte/transition';




  

Hint

Use Svelte's {#if visible} block and add in:fade and out:fade on the <p> element.

4

Add a button to toggle the message visibility

Add a <button> element below the message that toggles the visible variable when clicked. Use on:click with a function that sets visible = !visible. The button text should be Toggle Message.

Svelte

  let visible = true;
  import { fade } from 'svelte/transition';


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



  

Hint

Use <button on:click={() => visible = !visible}>Toggle Message</button> below the message.