Transition directive (transition:fade) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Svelte

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

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

{#if visible}
  <p [1]={fade}>Hello, I fade in and out!</p>
{/if}

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

Atransition:fade

Btransition

Canimate:fade

Duse:fade

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'animate:fade' instead of 'transition:fade'.

Using 'use:fade' which is for actions, not transitions.

Omitting 'fade' after the colon.

The correct syntax to apply a fade transition in Svelte is transition:fade. This tells Svelte to use the fade transition when the element enters or leaves the DOM.

2fill in blank

medium

Complete the code to import the fade transition correctly.

Svelte

<script>
  import [1] from 'svelte/transition';
  let show = true;
</script>

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

Afade

BfadeTransition

CfadeEffect

DfadeIn

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect import names like 'fadeTransition' or 'fadeEffect'.

Forgetting to import fade at all.

The fade transition is exported as fade from 'svelte/transition'. You must import it exactly as fade to use it.

3fill in blank

hard

Fix the error in the transition directive to make the fade work.

Svelte

<p transition=[1]>Fade me!</p>

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

Afade()

B(fade)

C{fade}

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses like 'fade()' which causes errors.

Using curly braces inside the directive.

The transition directive expects the name of the transition function without parentheses or braces. So use transition:fade, not transition:fade() or transition:{fade}.

4fill in blank

hard

Fill both blanks to create a fade transition with a duration of 500 milliseconds.

Svelte

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

{#if visible}
  <div [1]={{fade}} [2]={{ duration: 500 }}>Fade with duration</div>
{/if}

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

Atransition:fade

Btransition

Cuse

Danimate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'use' or 'animate' instead of 'transition'.

Putting the duration object in the wrong place.

The correct syntax is transition:fade={{ duration: 500 }}. The first blank is the directive name transition:fade, and the second blank is the attribute to pass parameters, which is just transition in this context.

5fill in blank

hard

Fill all three blanks to create a fade transition that starts with opacity 0 and lasts 1000 milliseconds.

Svelte

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

{#if show}
  <section [1]={{fade}} [2]={{ duration: [3] }}>Welcome!</section>
{/if}

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

Atransition:fade

Bduration

C1000

Ddelay

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'delay' instead of 'duration'.

Putting the duration value as a string instead of a number.

Use transition:fade to apply the fade. The duration option is passed as duration: 1000 to make it last 1 second.

Practice

1. What does the transition:fade directive do in Svelte?

easy

A. It instantly hides elements without animation.

B. It moves elements from left to right.

C. It changes the color of elements gradually.

D. It makes elements smoothly appear and disappear by fading.

Solution

1. Step 1: Understand the purpose of transition:fade

   This directive is used to animate elements so they fade in or out smoothly when they appear or disappear.

2. Step 2: Compare with other options

   The options describing movement from left to right and changing color gradually describe different animations, and the option describing instant hiding describes no animation. Only the fading description is correct.

3. Final Answer:

   It makes elements smoothly appear and disappear by fading. -> Option D

4. Quick Check:

   transition:fade = smooth fade in/out [OK]

Hint: Fade means smooth appear/disappear by changing opacity [OK]

Common Mistakes:

• Confusing fade with movement or color change
• Thinking fade hides elements instantly
• Assuming fade only works on text

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

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall correct object syntax in Svelte transitions

   The options object uses JavaScript object notation with colon and number value, no quotes or units.

2. Step 2: Check each option's syntax

   <div transition:fade={{ duration: 500 }}></div> uses correct syntax: { duration: 500 }. The option with {{duration=500}} uses = instead of :, the option with duration: '500' uses quotes around the number, and the option with duration: 500ms adds invalid 'ms' unit.

3. Final Answer:

   <div transition:fade={{ duration: 500 }}></div> -> Option A

4. Quick Check:

   Use colon and number for options object [OK]

Hint: Use colon and number for options, no quotes or units [OK]

Common Mistakes:

• Using = instead of : in object
• Putting quotes around numeric values
• Adding units like 'ms' inside options

3. Consider this Svelte code snippet:

<script>
  let visible = true;
</script>

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

{#if visible}
  <div transition:fade>Hello</div>
{/if}

What happens when you click the button?

medium

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

B. Nothing changes because the transition is missing duration.

C. The <div> fades in and out smoothly each time the button is clicked.

D. The <div> slides in from the left when shown.

Solution

1. Step 1: Understand the toggle and transition

   Clicking the button toggles the visible variable, which controls if the <div> is shown or hidden. The transition:fade applies a fade animation on enter and leave.

2. Step 2: Analyze the effect of transition:fade without duration

   By default, fade uses a standard duration, so the <div> fades smoothly in and out on toggle.

3. Final Answer:

   The <div> fades in and out smoothly each time the button is clicked. -> Option C

4. Quick Check:

   transition:fade animates fade in/out on toggle [OK]

Hint: Toggle with fade makes smooth appear/disappear [OK]

Common Mistakes:

• Thinking fade requires explicit duration
• Expecting slide animation instead of fade
• Assuming no animation happens on toggle

4. This Svelte code tries to fade a paragraph but does not work:

<p transition:fade duration=300>Hello</p>

What is the error and how to fix it?

medium

A. Missing curly braces around options object; fix: transition:fade={{ duration: 300 }}

B. Duration value must be a string; fix: duration='300'

C. transition:fade cannot be used on <p> elements; use <div> instead

D. The fade transition requires importing from 'svelte/animate' instead of 'svelte/transition'

Solution

1. Step 1: Identify the syntax error in transition options

   The code uses transition:fade duration=300 which is invalid syntax. Options must be passed as an object inside curly braces.

2. Step 2: Correct syntax for passing options

   The correct way is transition:fade={{ duration: 300 }} with double curly braces and colon.

3. Final Answer:

   Missing curly braces around options object; fix: transition:fade={{ duration: 300 }} -> Option A

4. Quick Check:

   Options need curly braces and colon syntax [OK]

Hint: Options must be inside {{ }} with colon, not bare attributes [OK]

Common Mistakes:

• Passing options without curly braces
• Using = instead of : inside options
• Wrong import source for fade transition

5. You want a list of items to fade in one by one with a 200ms delay between each fade using transition:fade. Which approach correctly applies this in Svelte?

hard

A. Use {#each items as item}<li transition:fade={{ delay: 200 }}>{item}</li>{/each} without index

B. Use {#each items as item, i}<li transition:fade={{ delay: i * 200 }}>{item}</li>{/each}

C. Use {#each items as item}<li transition:fade={{ duration: i * 200 }}>{item}</li>{/each} with duration instead of delay

D. Use {#each items as item}<li transition:fade={{ delay: 200 * items.length }}>{item}</li>{/each} same delay for all

Solution

1. Step 1: Understand how to stagger fade transitions

   To fade items one by one, each item needs a delay increasing by 200ms times its index.

2. Step 2: Check each option's delay usage

   Use {#each items as item, i}<li transition:fade={{ delay: i * 200 }}>{item}</li>{/each} uses the index i to multiply delay, correctly staggering fades. Use {#each items as item}<li transition:fade={{ delay: 200 }}>{item}</li>{/each} without index uses fixed delay, so all fade together. Use {#each items as item}<li transition:fade={{ duration: i * 200 }}>{item}</li>{/each} with duration instead of delay incorrectly uses duration for delay. Use {#each items as item}<li transition:fade={{ delay: 200 * items.length }}>{item}</li>{/each} same delay for all applies same delay to all.

3. Final Answer:

   Use {#each items as item, i}<li transition:fade={{ delay: i * 200 }}>{item}</li>{/each} -> Option B

4. Quick Check:

   Use index-based delay for staggered fade [OK]

Hint: Multiply delay by index to stagger fades [OK]

Common Mistakes:

• Using fixed delay for all items
• Confusing duration with delay
• Not using index in each block