Crossfade for list items in Svelte - Step-by-Step Execution

Concept Flow - Crossfade for list items

List Items Rendered

↓

User Triggers Add/Remove

↓

Crossfade Animation Starts

↓

Old Item Fades Out

↓

New Item Fades In

↓

List Updated with Animation

↓

Animation Ends, Stable List

The list renders items, then when items are added or removed, crossfade animations smoothly transition old items out and new items in.

Execution Sample

Svelte

import { crossfade } from 'svelte/transition';

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

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

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

This Svelte code sets up crossfade transitions for a list and removes an item with animation.

Execution Table

Step	Action	Items Before	Items After	Animation Triggered	Animation Description
1	Initial render	[]	[apple, banana, cherry]	No	List items appear without animation
2	Remove 'banana'	[apple, banana, cherry]	[apple, cherry]	Yes	'banana' fades out, 'apple' and 'cherry' stay
3	Add 'date'	[apple, cherry]	[apple, cherry, date]	Yes	'date' fades in, others stay
4	Remove 'apple'	[apple, cherry, date]	[cherry, date]	Yes	'apple' fades out, others stay
5	No change	[cherry, date]	[cherry, date]	No	No animation, list stable

💡 Execution stops when no further changes to the list occur.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
items	[]	[apple, banana, cherry]	[apple, cherry]	[apple, cherry, date]	[cherry, date]	[cherry, date]
animationActive	false	false	true	true	true	false

Key Moments - 3 Insights

Why does removing an item trigger a fade-out animation?

Because the crossfade function detects the item leaving the list and applies the fade-out transition as shown in execution_table step 2.

What happens if we add an item to the list?

The new item fades in smoothly, as seen in execution_table step 3, because crossfade applies a fade-in animation to entering items.

Does the animation run if the list does not change?

No, as shown in execution_table step 5, no animation triggers when the list remains the same.

Visual Quiz - 3 Questions

Look at the execution table, what is the 'items' array after step 2?

A [banana, cherry]

B [apple, banana, cherry]

C [apple, cherry]

D [apple, date]

💡 Hint

Check the 'Items After' column in step 2 of the execution_table.

At which step does the 'date' item fade in?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for when 'date' appears in the 'Items After' column and animation triggers.

If we remove 'cherry' instead of 'banana' at step 2, what changes in the animation?

A 'cherry' fades out instead of 'banana'

B 'banana' fades out instead of 'cherry'

C No animation triggers

D All items fade out

💡 Hint

Refer to how the removed item triggers fade-out in execution_table step 2.

Concept Snapshot

Svelte crossfade for list items:
- Import crossfade from 'svelte/transition'
- Create send and receive functions: const [send, receive] = crossfade({ duration: 400 })
- Use send and receive in list item transitions
- When items are added or removed, crossfade animates fade-in/out
- Smooth visual transitions keep UI friendly and clear

Full Transcript

This visual execution trace shows how Svelte's crossfade transition works for list items. Initially, the list renders items without animation. When an item is removed, the crossfade triggers a fade-out animation for that item. When a new item is added, it fades in smoothly. If the list does not change, no animation runs. Variables like 'items' and 'animationActive' track the list content and animation state. Key moments clarify why animations trigger only on changes. The quiz tests understanding of list states and animation triggers at each step.