Transition parameters (duration, delay) in Svelte - Mini Project: Build & Apply

Using Transition Parameters (duration, delay) in Svelte

📖 Scenario: You are building a simple Svelte app where a message appears and disappears with a smooth fade effect. You want to control how long the fade lasts and add a delay before it starts, just like waiting for a friend before you both start dancing.

🎯 Goal: Create a Svelte component that shows a message with a fade transition. Use the duration and delay parameters to control how the fade effect behaves.

📋 What You'll Learn

Create a boolean variable visible to control message visibility

Add a button to toggle visible

Use Svelte's fade transition on the message

Set duration to 1000 milliseconds (1 second)

Set delay to 500 milliseconds (0.5 seconds)

💡 Why This Matters

🌍 Real World

Transitions with parameters help make web apps feel smooth and polished, improving user experience by controlling animation timing.

💼 Career

Knowing how to use transitions with parameters is useful for frontend developers building interactive UI components in Svelte.

1

Set up visibility control

Create a boolean variable called visible and set it to true.

Svelte

# Your code here

Hint

Use let visible = true; to create a variable that controls if the message shows.

2

Add a toggle button

Add a <button> element with text Toggle that toggles the visible variable when clicked using on:click.

Svelte

let visible = true;

Hint

Use <button on:click={() => visible = !visible}>Toggle</button> to switch visibility.

3

Add fade transition with parameters

Import the fade transition from 'svelte/transition'. Use the fade transition on a <p> element that shows the text "Hello, Svelte!" only when visible is true. Set the transition parameters duration to 1000 and delay to 500.

Svelte

import { fade } from 'svelte/transition';

let visible = true;

 visible = !visible}>Toggle

Hint

Use transition:fade={{ duration: 1000, delay: 500 }} inside the <p> tag to control the fade effect.

4

Complete the component

Ensure the component has the import, the visible variable, the toggle button, and the conditional paragraph with the fade transition using the specified parameters.

Svelte

import { fade } from 'svelte/transition';

let visible = true;

 visible = !visible}>Toggle

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

Hint

Check that all parts are included and correctly written.