In and out transitions in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the fade transition from Svelte.

Svelte

import { [1] } from 'svelte/transition';

Drag options to blanks, or click blank then click option'

Afade

Bfly

Cslide

Dscale

Attempts:

3 left

💡 Hint

Common Mistakes

Importing a transition that is not used in the code.

Forgetting to import from 'svelte/transition'.

The fade transition is imported from svelte/transition to use fade effects.

2fill in blank

medium

Complete the code to apply the fade transition when the paragraph appears.

Svelte

<p [1]:fade>Hello, Svelte!</p>

Drag options to blanks, or click blank then click option'

Atransition

Bin

Canimate

Dout

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'in' or 'out' alone when both transitions are needed.

Using 'animate' which is for different effects.

The transition directive applies the fade effect both when the element enters and leaves.

3fill in blank

hard

Fix the error in the code to correctly apply an out transition with fade.

Svelte

{#if visible}
  <div out:[1]>{{message}}</div>
{/if}

Drag options to blanks, or click blank then click option'

Aslide

Bfade

Cfly

Dscale

Attempts:

3 left

💡 Hint

Common Mistakes

Using a transition not imported or not intended for out.

Misspelling the transition name.

The fade transition is used with the out: directive to animate the element leaving.

4fill in blank

hard

Fill both blanks to apply an in transition with fly and an out transition with fade.

Svelte

{#if show}
  <div in:[1] out:[2]>Welcome!</div>
{/if}

Drag options to blanks, or click blank then click option'

Afly

Bfade

Cslide

Dscale

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same transition for both in and out when different effects are desired.

Mixing up the order of transitions.

The fly transition is used for the element entering, and fade for leaving.

5fill in blank

hard

Fill all three blanks to import fade and fly, then apply fly in and fade out transitions.

Svelte

import { [1], [2] } from 'svelte/transition';

{#if active}
  <section in:[3] out:fade>Content here</section>
{/if}

Drag options to blanks, or click blank then click option'

Afade

Bfly

Dslide

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing both transitions.

Using the wrong transition name in the in directive.

Import fade and fly transitions, then use fly for the in transition and fade for out.

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