Transition directive (transition:fade) in Svelte

Introduction

The transition:fade directive in Svelte helps elements smoothly appear or disappear by fading in or out. It makes changes on the page look gentle and natural.

When you want a message or alert to softly appear and then vanish.

When showing or hiding a menu or modal with a smooth fade effect.

When toggling content visibility to avoid sudden jumps on the screen.

When you want to improve user experience by adding simple animations.

When you want to highlight changes without distracting the user.

Syntax

Svelte

<element transition:fade />

Use transition:fade on elements that enter or leave the DOM.

You can customize the fade duration by passing options like { duration: 400 }.

Examples

This paragraph will fade in when it appears and fade out when it disappears.

Svelte

<p transition:fade>Hello world!</p>

This div fades in and out over 1 second for a slower effect.

Svelte

<div transition:fade={{ duration: 1000 }}>Slow fade</div>

The button fades in when show is true and fades out when false.

Svelte

{#if show}<button transition:fade>Click me</button>{/if}

Sample Program

This Svelte component shows a button that toggles a message. The message uses transition:fade so it smoothly appears and disappears. The button has accessibility attributes for screen readers.

Svelte

<script>
  import { fade } from 'svelte/transition';
  let visible = false;
</script>

<button on:click={() => visible = !visible} aria-pressed={visible} aria-label="Toggle message">
  Toggle Message
</button>

{#if visible}
  <p transition:fade role="alert">Hello! This message fades in and out.</p>
{/if}

Important Notes

The fade transition only works when elements are added or removed from the DOM.

You can combine transition:fade with other transitions or animations for more effects.

Always add accessible roles and labels when toggling content for better user experience.

Summary

transition:fade makes elements smoothly appear and disappear by fading.

Use it on elements that enter or leave the page to improve visual flow.

You can customize the fade speed with options like duration.

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