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.

Practice

1. What is the main purpose of using crossfade in Svelte list items?

easy

A. To fetch data asynchronously for list items

B. To validate user input in list forms

C. To smoothly animate items when they are added, removed, or reordered in a list

D. To sort list items alphabetically

Solution

1. Step 1: Understand crossfade usage context

   Crossfade is used to animate transitions between list states, such as adding or removing items.

2. Step 2: Identify the animation effect

   It creates smooth movement or fading effects for list items during changes.

3. Final Answer:

   To smoothly animate items when they are added, removed, or reordered in a list -> Option C

4. Quick Check:

   Crossfade = smooth list animations [OK]

Hint: Crossfade = smooth item movement in lists [OK]

Common Mistakes:

• Confusing crossfade with data fetching
• Thinking crossfade sorts items
• Using crossfade for input validation

2. Which of the following is the correct way to import the crossfade functions in a Svelte component?

easy

A. import { crossfade } from 'svelte/animate';

B. import { send, receive } from 'svelte/transition';

C. import { fade } from 'svelte/motion';

D. import { crossfade } from 'svelte/transition';

Solution

1. Step 1: Recall correct import source

   The crossfade function comes from svelte/transition.

2. Step 2: Match correct import syntax

   import { crossfade } from 'svelte/transition'; correctly imports crossfade from svelte/transition.

3. Final Answer:

   import { crossfade } from 'svelte/transition'; -> Option D

4. Quick Check:

   crossfade from svelte/transition [OK]

Hint: crossfade from 'svelte/transition' [OK]

Common Mistakes:

• Importing crossfade from 'svelte/animate'
• Trying to import send, receive directly
• Incorrect import paths or names

3. Given this Svelte snippet using crossfade:

const [send, receive] = crossfade({ duration: 300 });

let items = [1, 2, 3];

// Later items = [2, 3, 4];

What will happen visually when item 1 is removed and item 4 is added?

medium

A. Item 1 fades out smoothly and item 4 fades in smoothly with movement

B. Item 1 disappears instantly and item 4 appears instantly

C. All items blink without animation

D. The list does not update visually

Solution

1. Step 1: Understand crossfade behavior on list changes

   When items are removed or added, crossfade animates their disappearance and appearance smoothly.

2. Step 2: Apply to given items change

   Item 1 fades out smoothly, and new item 4 fades in with a smooth movement effect.

3. Final Answer:

   Item 1 fades out smoothly and item 4 fades in smoothly with movement -> Option A

4. Quick Check:

   Crossfade animates add/remove smoothly [OK]

Hint: Crossfade animates removed and added items smoothly [OK]

Common Mistakes:

• Expecting instant disappearance or appearance
• Thinking items blink without animation
• Assuming no visual update happens

4. You wrote this Svelte code to crossfade list items but animations do not work:

const [send, receive] = crossfade({ duration: 400 });

let items = ["a", "b", "c"];

{#each items as item}
  
{{item}}
{/each}

What is the likely problem?

medium

A. You forgot to add a unique key to each list item

B. You should use transition:receive instead of transition:send

C. The crossfade function must be imported from 'svelte/motion'

D. The duration option must be a string, not a number

Solution

1. Step 1: Check list rendering with crossfade

   Crossfade requires unique keys on list items to track them for animation.

2. Step 2: Identify missing key usage

   The code does not provide a key in the {#each} block, so animations fail.

3. Final Answer:

   You forgot to add a unique key to each list item -> Option A

4. Quick Check:

   Unique keys needed for crossfade animations [OK]

Hint: Always add unique keys to list items for crossfade [OK]

Common Mistakes:

• Confusing send and receive usage
• Wrong import source for crossfade
• Setting duration as string instead of number

5. You want to crossfade a list of objects with unique IDs. Which is the correct way to write the {#each} block to ensure proper crossfade animations?

let items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

const [send, receive] = crossfade({ duration: 500 });

hard

A. {#each items as item}
{item.name}
{/each}

B. {#each items as item (item.id)}
{item.name}
{/each}

C. {#each items as item (item.name)}
{item.name}
{/each}

D. {#each items as item (item.id)}
{item.name}
{/each}

Solution

1. Step 1: Use unique keys for crossfade

   Crossfade requires a unique key per item to track animations; here, item.id is unique.

2. Step 2: Use correct transition directives

   Use in:receive={receive} and out:send={send} on the element.

3. Final Answer:

   {#each items as item (item.id)} <div in:receive={receive} out:send={send}>{item.name}</div> {/each} -> Option B

4. Quick Check:

   Unique key + in:receive out:send = correct crossfade [OK]

Hint: Unique (item.id) + in:receive={receive} out:send={send} [OK]

Common Mistakes:

• Omitting keys causing animation failure
• Using transition:fade instead of send/receive
• Using non-unique keys like item.name