Transition directive (transition:fade) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the fade transition is applied?

Consider a Svelte component that uses transition:fade on a paragraph. What will the user see when the paragraph is removed from the DOM?

Svelte

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

<button on:click={() => visible = !visible}>Toggle</button>

{#if visible}
  <p transition:fade>This text will fade out when hidden.</p>
{/if}

A The paragraph slides out to the left before disappearing.

B The paragraph fades out smoothly before being removed from the DOM.

C The paragraph instantly disappears without any animation.

D The paragraph blinks several times before disappearing.

💡 Hint

Think about what the fade transition does visually.

The fade transition smoothly changes the element's opacity from fully visible to invisible before removing it from the DOM.

📝 Syntax

intermediate

Which option correctly applies the fade transition with a duration of 500ms?

You want to apply the fade transition to a div with a custom duration of 500 milliseconds. Which code snippet is correct?

A <div transition:fade={{ duration: 500 }}>Content</div>

B <div transition:fade={{duration:500}}>Content</div>

C <div transition:fade={{ duration:500 }}>Content</div>

D >vid/<tnetnoC>}} 005 :noitarud {{=edaf:noitisnart vid<

💡 Hint

Check the syntax for passing parameters to transitions in Svelte.

The correct syntax uses curly braces inside the directive with a JavaScript object, spaced properly: transition:fade={{ duration: 500 }}.

🔧 Debug

advanced

Why does the fade transition not run on initial render?

Given this Svelte code, the fade transition does not animate when the paragraph first appears. Why?

Svelte

<script>
  import { fade } from 'svelte/transition';
  let show = true;
</script>

{#if show}
  <p transition:fade>This text appears immediately without fade-in.</p>
{/if}

A Svelte does not run transitions on elements that are present on initial render by default.

B The fade transition requires an explicit <code>in:fade</code> directive to run on mount.

C The <code>show</code> variable must be initialized to false for the fade to run.

D The fade transition only works on elements removed from the DOM, not added.

💡 Hint

Think about when Svelte applies transitions by default.

Svelte applies transitions only when elements enter or leave the DOM after initial render. Elements present initially do not animate by default.

❓ state_output

advanced

What is the value of visible after the fade transition completes?

In this Svelte component, what is the value of visible after the fade transition finishes when toggling off?

Svelte

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

  function toggle() {
    visible = !visible;
  }
</script>

<button on:click={toggle}>Toggle</button>

{#if visible}
  <p transition:fade>This text fades in and out.</p>
{/if}

A visible never changes because transitions block state updates.

B visible toggles back to true automatically after the fade transition.

C visible remains true until the fade transition finishes, then becomes false.

D visible immediately becomes false when the button is clicked, before the fade starts.

💡 Hint

Consider when the state variable changes relative to the transition animation.

The visible variable changes immediately when the button is clicked. The fade transition animates the element leaving the DOM, but the state is already updated.

🧠 Conceptual

expert

Which statement best describes the difference between transition:fade and in:fade in Svelte?

Choose the option that correctly explains how transition:fade differs from in:fade.

A <code>transition:fade</code> runs only when the element enters the DOM; <code>in:fade</code> runs when it leaves.

B <code>transition:fade</code> disables all animations; <code>in:fade</code> enables fade animations.

C <code>transition:fade</code> runs both when the element enters and leaves the DOM; <code>in:fade</code> runs only when the element enters.

D <code>transition:fade</code> is deprecated and replaced by <code>in:fade</code>.

💡 Hint

Think about when each directive triggers animations.

transition:fade applies fade animation on both entering and leaving the DOM. in:fade applies fade only when the element appears.

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