In and out transitions in Svelte - Mini Project: Build & Apply

In and Out Transitions in Svelte

📖 Scenario: You are building a simple Svelte app where a message appears and disappears with smooth animations. This helps users notice changes on the screen in a friendly way.

🎯 Goal: Create a Svelte component that shows a message with an in transition when it appears and an out transition when it disappears. Use Svelte's built-in fade transition.

📋 What You'll Learn

Create a boolean variable called visible to control message visibility

Import the fade transition from svelte/transition

Use the fade transition with in: and out: directives on the message element

Add a button that toggles the visible variable to show or hide the message

💡 Why This Matters

🌍 Real World

Transitions help make web apps feel smooth and polished by animating elements when they appear or disappear.

💼 Career

Knowing how to use transitions in Svelte is useful for frontend developers to improve user experience and interface polish.

1

Set up the visibility variable

Create a boolean variable called visible and set it to true inside the <script> tag.

Svelte

  // Create a boolean variable called visible and set it to true
  // Your code here

Hint

Use let visible = true; inside the <script> tag.

2

Import the fade transition

Import the fade transition from svelte/transition inside the <script> tag below the visible variable.

Svelte

  let visible = true;
  // Import fade transition from svelte/transition
  // Your code here

Hint

Write import { fade } from 'svelte/transition'; inside the <script> tag.

3

Add the message with in and out fade transitions

Add a <p> element that shows the text "Hello, Svelte!" only when visible is true. Use the in:fade and out:fade directives on this <p> element.

Svelte

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




  

Hint

Use Svelte's {#if visible} block and add in:fade and out:fade on the <p> element.

4

Add a button to toggle the message visibility

Add a <button> element below the message that toggles the visible variable when clicked. Use on:click with a function that sets visible = !visible. The button text should be Toggle Message.

Svelte

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


{#if visible}
  Hello, Svelte!
{/if}



  

Hint

Use <button on:click={() => visible = !visible}>Toggle Message</button> below the message.

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