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.