Crossfade for list items in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the crossfade function from Svelte's transition module.

Svelte

import { [1] } from 'svelte/transition';

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

Afade

Bslide

Cfly

Dcrossfade

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'fade' instead of 'crossfade'.

Forgetting to import from 'svelte/transition'.

The crossfade function is imported from svelte/transition to enable crossfade animations between list items.

2fill in blank

medium

Complete the code to create crossfade functions with default parameters.

Svelte

const [[1], send] = crossfade({});

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

Acrossfade

Breceive

Cfade

Dsend

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the order of send and receive.

Using 'fade' or 'crossfade' as variable names.

The crossfade function returns a pair of functions: send and receive. The first is receive, the second is send. Here, receive is assigned to the first variable.

3fill in blank

hard

Fix the error in the list item transition directive to use the correct crossfade function.

Svelte

<li transition:[1]={{key}}>{{item}}</li>

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

Aslide

Bsend

Creceive

Dfade

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'send' instead of 'receive' in the transition directive.

Using 'fade' which is a different transition.

The receive function is used in the transition: directive to animate items entering the list.

4fill in blank

hard

Fill both blanks to correctly apply crossfade transitions for list items leaving and entering.

Svelte

<li out:[1]={{key}} in:[2]={{key}}>{{item}}</li>

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

Asend

Breceive

Cfade

Dslide

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping send and receive functions.

Using 'fade' or 'slide' instead of crossfade functions.

The send function is used for the out: transition when items leave, and receive is used for the in: transition when items enter.

5fill in blank

hard

Fill all three blanks to create a crossfade with custom duration and easing.

Svelte

const [receive, send] = crossfade({ duration: [1], easing: [2], fallback: [3] });

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

A400

BcubicInOut

C() => {}

D200

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong duration values.

Not providing a fallback function.

Using incorrect easing function names.

The duration is set to 200 milliseconds, easing uses the cubicInOut function for smooth animation, and fallback is a function that does nothing if crossfade is not possible.