In and out transitions in Svelte - Step-by-Step Execution

Concept Flow - In and out transitions

Component Mounts

↓

Apply 'in' Transition

↓

Element Visible

↓

Trigger Removal

↓

Apply 'out' Transition

↓

Element Removed from DOM

When a component or element appears, Svelte runs the 'in' transition. When it disappears, it runs the 'out' transition before removing it.

Execution Sample

Svelte

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

<button on:click={() => visible = !visible}>Toggle</button>

{#if visible}
  <p in:fade out:fade>Hello!</p>
{/if}

This code toggles a paragraph with fade in and fade out transitions when the button is clicked.

Execution Table

Step	Action	visible	Transition Applied	Element State
1	Initial render	false	None	Paragraph not in DOM
2	Click button to toggle visible	true	in:fade starts	Paragraph fading in
3	Fade in completes	true	in:fade ends	Paragraph fully visible
4	Click button to toggle visible	false	out:fade starts	Paragraph fading out
5	Fade out completes	false	out:fade ends	Paragraph removed from DOM

💡 Element removed after out transition completes when visible becomes false

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
visible	false	true	false	false

Key Moments - 2 Insights

Why does the paragraph stay visible briefly after clicking to hide it?

Because the 'out' transition runs before the element is removed from the DOM, as shown in steps 4 and 5 of the execution_table.

What happens if we remove the 'out:fade' directive?

The paragraph disappears immediately without fading out, skipping the 'out' transition phase in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'visible' when the 'in:fade' transition starts?

A false

B true

C undefined

D null

💡 Hint

Check Step 2 in the execution_table where 'in:fade starts' and 'visible' value is shown.

At which step does the paragraph get removed from the DOM?

A Step 5

B Step 4

C Step 3

D Step 2

💡 Hint

Look for 'Paragraph removed from DOM' in the Element State column of the execution_table.

If we toggle 'visible' from false to true, which transition runs?

A out:fade

B no transition

C in:fade

D both in:fade and out:fade

💡 Hint

See Step 2 in execution_table where 'in:fade starts' happens when visible becomes true.

Concept Snapshot

Svelte 'in' and 'out' transitions animate elements entering and leaving the DOM.
Use directives like in:fade and out:fade on elements.
'in' runs when element appears; 'out' runs before removal.
Transitions keep UI smooth and visually clear.
Toggle visibility with a boolean and wrap element in {#if} block.

Full Transcript

In Svelte, when you show or hide an element using a boolean, you can add animations called transitions. The 'in' transition runs when the element appears, making it fade or slide in smoothly. The 'out' transition runs when the element disappears, animating it out before removing it from the page. For example, using in:fade and out:fade on a paragraph toggled by a button, the paragraph fades in when visible becomes true and fades out before it is removed when visible becomes false. This keeps the UI feeling smooth and natural. The execution table shows each step: initial hidden state, fade in start and end, fade out start and end, and finally removal from the DOM. This helps beginners see exactly when transitions happen and how the element state changes.

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