In and out transitions in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Svelte component toggles visibility?

Consider this Svelte component that uses the fade transition on a paragraph. What will you see when you click the button to toggle the paragraph?

Svelte

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

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

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

A The paragraph blinks on and off without fading.

B The paragraph smoothly fades in when shown and fades out when hidden.

C The paragraph instantly appears and disappears without any animation.

D The paragraph slides in from the left and slides out to the right.

💡 Hint

Think about what the fade transition does in Svelte.

The fade transition in Svelte smoothly changes the element's opacity from 0 to 1 when it appears and from 1 to 0 when it disappears, creating a fade effect.

📝 Syntax

intermediate

Which option correctly applies a custom duration to an out transition in Svelte?

You want to make a paragraph fade out over 2 seconds when it is removed. Which code snippet correctly sets the duration for the fade out transition?

Svelte

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

  <button on:click={() => show = !show} aria-label="Toggle paragraph">Toggle</button>

  {#if show}
    <p ???>This paragraph fades out slowly.</p>
  {/if}

A transition:fade(duration=2000)

B transition:fade={{ duration: 2000 }}

C fade:out={{ duration: 2000 }}

D out:fade={{ duration: 2000 }}

💡 Hint

Remember how to specify only the out transition with custom parameters.

In Svelte, to customize only the out transition, you use out:fade={{ duration: 2000 }}. The transition:fade applies to both in and out.

🔧 Debug

advanced

Why does this Svelte component's out transition not run?

Look at this Svelte code. The paragraph should fade out when hidden, but it disappears instantly. Why?

Svelte

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

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

  {#if visible}
    <p transition:fade={{ duration: 1000 }} out:fade={{ duration: 2000 }}>Hello!</p>
  {/if}

A The paragraph is removed immediately because the <code>fade</code> import is missing.

B The <code>out:fade</code> is ignored because it has a longer duration than the in transition.

C The <code>transition:fade</code> overrides the <code>out:fade</code>, so only the in transition runs.

D The <code>out:fade</code> must be placed before <code>transition:fade</code> to work.

💡 Hint

Check how Svelte handles multiple transition directives on the same element.

When both transition:fade and out:fade are used on the same element, transition:fade controls both in and out transitions, overriding out:fade. So the out transition uses the duration from transition:fade (1000ms), not the 2000ms specified in out:fade. The out transition still runs but with the shorter duration.

❓ state_output

advanced

What is the final value of count after this Svelte component runs?

This Svelte component increments count each time the paragraph finishes its out transition. What is the value of count after clicking the button twice?

Svelte

  <script>
    import { fade } from 'svelte/transition';
    let visible = true;
    let count = 0;
    function handleOutroEnd() {
      count += 1;
    }
  </script>

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

  {#if visible}
    <p transition:fade on:outroend={handleOutroEnd}>Count: {count}</p>
  {/if}

A 1

B 0

C 2

D 3

💡 Hint

Remember when the outroend event fires in Svelte transitions.

The outroend event fires once when the element finishes its out transition. Clicking the button twice toggles visibility twice: first hides (count increments to 1), then shows (no increment). So final count is 1.

🧠 Conceptual

expert

Which statement about Svelte's in and out transitions is true?

Choose the correct statement about how Svelte handles in and out transitions on elements.

A An element can have both <code>in</code> and <code>out</code> transitions, and they run independently when the element appears or disappears.

B If an element has an <code>in</code> transition, it must also have an <code>out</code> transition defined.

C Only one transition type (<code>in</code> or <code>out</code>) can be used on an element at a time.

D Using <code>transition</code> shorthand disables both <code>in</code> and <code>out</code> transitions.

💡 Hint

Think about how Svelte triggers transitions when elements enter or leave the DOM.

Svelte allows an element to have separate in and out transitions. The in transition runs when the element appears, and the out transition runs when it disappears. They work independently and can have different effects or durations.