Crossfade for list items in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when an item is removed from a list using Svelte's crossfade?

Consider a Svelte component that uses crossfade to animate list items when they are removed. What is the visible behavior when an item is deleted?

Svelte

import { crossfade } from 'svelte/transition';
const [send, receive] = crossfade({ duration: 400 });

let items = ['apple', 'banana', 'cherry'];

function removeItem(item) {
  items = items.filter(i => i !== item);
}

A The removed item smoothly fades out and moves to the position of the next item before disappearing.

B The removed item instantly disappears without any animation.

C The removed item fades out but does not move; the other items jump to fill the gap immediately.

D The removed item slides out to the right without fading.

💡 Hint

Think about how crossfade combines fading and movement to create smooth transitions.

Svelte's crossfade transition animates the removed item by fading it out while moving it to the position of the incoming item, creating a smooth visual effect.

📝 Syntax

intermediate

Which code snippet correctly applies crossfade to list items in Svelte?

Choose the correct way to apply crossfade transitions to a list of items in Svelte.

Svelte

import { crossfade } from 'svelte/transition';
const [send, receive] = crossfade({ duration: 300 });

let items = ['one', 'two', 'three'];

A <ul>{#each items as item (item)}<li transition:receive>{item}</li>{/each}</ul>

B <ul>{#each items as item (item)}<li transition:send>{item}</li>{/each}</ul>

C <ul>{#each items as item (item)}<li transition:crossfade>{item}</li>{/each}</ul>

D <ul>{#each items as item (item)}<li in:receive out:send>{item}</li>{/each}</ul>

💡 Hint

Remember that crossfade returns two functions: one for items leaving and one for items entering.

You must use in:receive for items entering and out:send for items leaving to properly apply crossfade transitions.

🔧 Debug

advanced

Why does the crossfade animation not trigger when list items change?

Given this Svelte code, the crossfade animation does not run when items are added or removed. What is the most likely cause?

Svelte

import { crossfade } from 'svelte/transition';
const [send, receive] = crossfade({ duration: 500 });

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

// In markup:
// {#each items as item}<div in:receive out:send>{item}</div>{/each}

A The crossfade transition only works with <li> elements, not <div>.

B The crossfade functions are not imported correctly from 'svelte/animate'.

C The list items lack a unique key, so Svelte cannot track them for animation.

D The duration option must be set to 0 for crossfade to work.

💡 Hint

Think about how Svelte tracks list items for transitions.

Svelte requires a unique key in the each block to track items and apply transitions correctly. Without keys, animations won't trigger.

🧠 Conceptual

advanced

What is the role of the 'send' and 'receive' functions in Svelte's crossfade?

In Svelte's crossfade transition, what do the send and receive functions represent?

A They are event handlers for mouse events during the transition.

B <code>send</code> is used for elements leaving the DOM; <code>receive</code> is for elements entering the DOM.

C <code>send</code> is for elements entering the DOM; <code>receive</code> is for elements leaving the DOM.

D Both <code>send</code> and <code>receive</code> are used only for elements entering the DOM.

💡 Hint

Consider the direction of the animation for items leaving and entering.

send handles the animation of elements leaving the DOM, while receive handles elements entering, enabling smooth crossfade effects.

❓ state_output

expert

What is the final list order and animation behavior after swapping two items with crossfade?

Given a Svelte list ['x', 'y', 'z'] with crossfade applied, if you swap the positions of 'x' and 'z' in the array, what will happen?

Svelte

import { crossfade } from 'svelte/transition';
const [send, receive] = crossfade({ duration: 400 });

let items = ['x', 'y', 'z'];

function swap() {
  items = ['z', 'y', 'x'];
}

// In markup:
// {#each items as item (item)}<div in:receive out:send>{item}</div>{/each}

A The items 'x' and 'z' smoothly crossfade to their new positions without disappearing.

B No animation occurs because the items are the same, only order changed.

C The items 'x' and 'z' fade out and fade back in at their new positions separately.

D The entire list fades out and then fades back in with the new order.

💡 Hint

Think about how crossfade matches elements by their keys during reordering.

Crossfade matches items by their keys and animates their movement smoothly to new positions without fading out completely.

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