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.