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.

Practice

1. What is the main purpose of using in: and out: transitions in Svelte?

easy

A. To animate elements when they enter or leave the page

B. To change the color of text dynamically

C. To handle form input validation

D. To fetch data from an API

Solution

1. Step 1: Understand transition directives

   The in: and out: directives in Svelte are used to add animations when elements appear or disappear.

2. Step 2: Identify the purpose of these transitions

   These transitions help create smooth animations for elements entering or leaving the page, improving user experience.

3. Final Answer:

   To animate elements when they enter or leave the page -> Option A

4. Quick Check:

   Transitions animate element entry/exit = C [OK]

Hint: Remember: in/out transitions animate element appearance/disappearance [OK]

Common Mistakes:

• Confusing transitions with styling like color changes
• Thinking transitions handle data fetching
• Mixing transitions with form validation

2. Which of the following is the correct syntax to apply a fade-in transition to a <div> in Svelte?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Svelte transition syntax

   Svelte uses in: and out: directives followed by the transition name, e.g., in:fade.

2. Step 2: Match the correct syntax

   <div in:fade> uses in:fade correctly on the <div> element.

3. Final Answer:

   <div in:fade> -> Option B

4. Quick Check:

   Correct directive syntax = A [OK]

Hint: Use in: before transition name, like in:fade [OK]

Common Mistakes:

• Placing transition name before colon
• Using incorrect directive like transition:fade-in
• Using camelCase instead of lowercase

3. Consider this Svelte code snippet:

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

  <button on:click={() => visible = !visible}>Toggle</button>
  {#if visible}
    <div in:fade out:fade>Hello</div>
  {/if}

What happens when you click the button?

medium

A. The <div> appears and disappears instantly without animation

B. An error occurs because fade is not imported correctly

C. The button stops working after first click

D. The <div> smoothly fades in and out on toggle

Solution

1. Step 1: Understand the code behavior

   The visible variable toggles between true and false on button click, controlling the <div> display.

2. Step 2: Analyze transitions applied

   The in:fade and out:fade directives animate the <div> fading in when it appears and fading out when it disappears.

3. Final Answer:

   The <div> smoothly fades in and out on toggle -> Option D

4. Quick Check:

   Fade transitions animate toggle = B [OK]

Hint: Toggle with in:fade and out:fade means smooth fade animations [OK]

Common Mistakes:

• Expecting instant show/hide without animation
• Assuming button stops working
• Thinking import is missing or wrong

4. You wrote this Svelte code:

  <script>
    import { slide } from 'svelte/transition';
    let show = false;
  </script>

  <button on:click={() => show = !show}>Show</button>
  {#if show}
    <div in:slide out:slide>Sliding content</div>
  {/if}

But the slide transition does not run when the <div> disappears. What is the likely cause?

medium

A. The <div> is removed instantly before the out transition runs

B. The slide transition requires a duration parameter

C. The out:slide directive is missing or misspelled

D. The show variable is not toggled correctly

Solution

1. Step 1: Check transition directives

   The code includes both in:slide and out:slide, so directives are present and spelled correctly.

2. Step 2: Understand Svelte transition timing

   If the element is removed instantly (e.g., by a parent condition or key), the out transition may not run because the element is gone before animation starts.

3. Final Answer:

   The <div> is removed instantly before the out transition runs -> Option A

4. Quick Check:

   Instant removal blocks out transition = A [OK]

Hint: Out transitions need element present; instant removal skips animation [OK]

Common Mistakes:

• Assuming missing directive causes issue
• Thinking duration parameter is always required
• Believing toggle variable is incorrect

5. You want to create a Svelte component that slides in a message when it appears and fades out smoothly when it disappears. Which code snippet correctly applies these transitions?

hard

A. <div in:slide={{ x: -200 }} out:fade>Message</div>

B. <div in:fade out:slide={{ x: 200 }}>Message</div>

C. <div in:slide out:fade={{ duration: 500 }}>Message</div>

D. <div in:slide={{ y: -200 }} out:fade>Message</div>

Solution

1. Step 1: Understand transition requirements

   The message should slide in when it appears and fade out smoothly with a custom duration.

2. Step 2: Analyze options for correct syntax and parameters

   <div in:slide out:fade={{ duration: 500 }}>Message</div> uses in:slide (default slide transition) and out:fade with a duration parameter, which is valid syntax.

3. Step 3: Check other options for errors

   <div in:slide={{ x: -200 }} out:fade>Message</div> uses x: -200 which is invalid for slide (slide uses default direction, no x param). <div in:fade out:slide={{ x: 200 }}>Message</div> reverses transitions. <div in:slide={{ y: -200 }} out:fade>Message</div> uses invalid parameter y: -200.

4. Final Answer:

   <div in:slide out:fade={{ duration: 500 }}>Message</div> -> Option C

5. Quick Check:

   Slide in + fade out with duration = D [OK]

Hint: Use slide for in, fade with params for out to combine effects [OK]

Common Mistakes:

• Using invalid parameters for slide transition
• Mixing up in and out transitions
• Forgetting to add parameters for smooth fade out