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.