Animate directive in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the animate directive is used with a keyed each block?

Consider a Svelte component that uses the animate:flip directive inside a keyed {#each} block. What is the visible effect when the list order changes?

Svelte

<script>
  import { flip } from 'svelte/animate';
  let items = [1, 2, 3];
  function shuffle() {
    items = [...items].sort(() => Math.random() - 0.5);
  }
</script>
<button on:click={shuffle}>Shuffle</button>
<ul>
  {#each items as item (item)}
    <li animate:flip>{item}</li>
  {/each}
</ul>

A The list items instantly change order without any animation.

B The list items smoothly move to their new positions with a flip animation when shuffled.

C The list items fade out and fade back in when shuffled.

D The list items disappear and do not reappear after shuffling.

💡 Hint

Think about what the flip animation does in Svelte when elements change position.

The animate:flip directive animates elements smoothly from their old position to their new position when the order changes in a keyed each block. This creates a natural movement effect.

📝 Syntax

intermediate

Which option correctly applies the animate directive with a custom function?

Given a custom animation function myAnimate, which syntax correctly applies it to an element in Svelte?

Svelte

function myAnimate(node, params) {
  // animation logic
  return {
    delay: 0,
    duration: 300
  };
}

A <div animate:myAnimate(params)>Content</div>

B <div animate={myAnimate(params)}>Content</div>

C <div use:animate={myAnimate(params)}>Content</div>

D <div animate:myAnimate={params}>Content</div>

💡 Hint

Remember the syntax for directives with parameters in Svelte.

The correct syntax for using the animate directive with a custom function and parameters is animate:myAnimate={params}. The colon separates the directive name and the function, and the curly braces pass parameters.

🔧 Debug

advanced

Why does the animate directive not trigger on element removal?

In this Svelte code, the animate:flip directive is used on list items. When an item is removed from the list, no animation plays. Why?

Svelte

<script>
  import { flip } from 'svelte/animate';
  let items = [1, 2, 3];
  function remove() {
    items = items.slice(0, -1);
  }
</script>
<button on:click={remove}>Remove last</button>
<ul>
  {#each items as item (item)}
    <li animate:flip>{item}</li>
  {/each}
</ul>

A The animate directive only animates position changes, not element removal; use transitions for removal animations.

B The flip animation requires a key on the each block to work on removals, which is missing here.

C The animate directive must be combined with the transition directive to animate removals.

D The flip animation only works on additions, not removals or moves.

💡 Hint

Think about what the animate directive is designed to do versus transitions.

The animate directive in Svelte is designed to animate position changes of elements that remain in the DOM. It does not animate elements being added or removed. For enter and leave animations, the transition directive should be used.

❓ state_output

advanced

What is the final order of items after this animation sequence?

Given this Svelte component using animate:flip, what is the final order of items displayed after clicking the button twice?

Svelte

<script>
  import { flip } from 'svelte/animate';
  let items = [1, 2, 3, 4];
  function reorder() {
    items = [4, 3, 2, 1];
  }
</script>
<button on:click={reorder}>Reverse</button>
<ul>
  {#each items as item (item)}
    <li animate:flip>{item}</li>
  {/each}
</ul>

A [1, 4, 3, 2]

B [1, 2, 3, 4]

C [4, 3, 2, 1]

D [2, 3, 4, 1]

💡 Hint

Consider what the reorder function does to the items array.

Clicking the button sets the items array to [4, 3, 2, 1]. The animate:flip directive animates the items moving to their new positions, but the final order is exactly the new array.

🧠 Conceptual

expert

Why is the animate directive preferred over manual CSS animations for list reordering?

In Svelte, why might you choose the animate:flip directive instead of writing manual CSS animations to handle list reordering?

A Because <code>animate:flip</code> automatically calculates element position changes and animates smoothly without manual keyframes.

B Because CSS animations cannot animate position changes at all.

C Because <code>animate:flip</code> disables browser repainting, improving performance drastically.

D Because manual CSS animations require JavaScript to trigger, while <code>animate:flip</code> does not.

💡 Hint

Think about what the flip animation does behind the scenes.

The animate:flip directive automatically detects how elements move between states and animates their position changes smoothly. This avoids the complexity of writing manual CSS keyframes and calculating positions.

Practice

1. What is the main purpose of the animate:flip directive in Svelte?

easy

A. To add fade-in effects when elements appear.

B. To handle click events on elements.

C. To smoothly animate elements when their position changes in the DOM.

D. To style elements with CSS animations.

Solution

1. Step 1: Understand what animate:flip does

   The animate:flip directive animates elements smoothly when their position changes, especially in keyed {#each} blocks.

2. Step 2: Compare options with the directive's purpose

   Options A, C, and D describe other behaviors like fading, event handling, or styling, which are not the role of animate:flip.

3. Final Answer:

   To smoothly animate elements when their position changes in the DOM. -> Option C

4. Quick Check:

   Animate directive = smooth position change animation [OK]

Hint: Remember: animate:flip = smooth move on position change [OK]

Common Mistakes:

• Confusing animate:flip with transition or event directives
• Thinking it adds fade or color effects
• Assuming it handles user interactions

2. Which of the following is the correct syntax to apply the animate directive with the flip animation on a list item in Svelte?

easy

A. {item}

B. {item}

C. {item}

D. {item}

Solution

1. Step 1: Recall the correct directive syntax in Svelte

   Svelte uses the syntax animate:flip to apply the flip animation as a directive on elements.

2. Step 2: Check each option's syntax

3. {item}
uses animate:flip correctly. Options A, B, and D use incorrect syntax such as use:animate, hyphenated directive, or object notation which are invalid here.

4. Final Answer:

   <li animate:flip>{item}</li> -> Option A

5. Quick Check:

   Directive syntax = animate:flip [OK]

Hint: Use colon syntax for directives: animate:flip [OK]

Common Mistakes:

• Using use:animate instead of animate:flip
• Trying to pass flip as an object
• Hyphenating directive names

3. Given the following Svelte code, what will happen when the button is clicked?

{`


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


Shuffle`}

medium

A. The list items will smoothly move to their new positions after shuffling.

B. The list items will instantly change order without animation.

C. The list items will fade out and fade in after shuffling.

D. The code will cause a runtime error due to incorrect animate usage.

Solution

1. Step 1: Understand the use of animate:flip with keyed each block

   The list uses a keyed {#each} block with animate:flip on each li. When the array order changes, the directive animates the position changes smoothly.

2. Step 2: Analyze the shuffle function effect

   Clicking the button shuffles the items array randomly, causing the list order to change. The animate:flip directive animates the movement of items to their new positions.

3. Final Answer:

   The list items will smoothly move to their new positions after shuffling. -> Option A

4. Quick Check:

   animate:flip + keyed list = smooth reorder animation [OK]

Hint: Keyed list + animate:flip = smooth reorder animation [OK]

Common Mistakes:

• Ignoring the keyed block requirement
• Expecting fade instead of position animation
• Thinking the list instantly changes without animation

4. Identify the error in this Svelte code snippet using the animate directive:

{`


  {#each numbers as num}
    
{num}
  {/each}
`}

medium

A. The list items should be wrapped in a <div> for animation to work.

B. The animate directive is used incorrectly; it should be transition:flip.

C. The import statement for flip is unnecessary and causes an error.

D. The {#each} block is missing a key, so animate:flip won't work properly.

Solution

1. Step 1: Check the use of animate:flip in a list

   For animate:flip to animate position changes in a list, the {#each} block must be keyed to track items uniquely.

2. Step 2: Identify missing key in the {#each} block

   The code uses {#each numbers as num} without a key. This prevents Svelte from tracking item positions correctly, so animation won't work as expected.

3. Final Answer:

   The {#each} block is missing a key, so animate:flip won't work properly. -> Option D

4. Quick Check:

   Animate directive needs keyed each block [OK]

Hint: Always key items in {#each} for animate:flip to work [OK]

Common Mistakes:

• Forgetting to add a key in {#each}
• Confusing animate with transition directives
• Thinking import of flip is optional or wrong

5. You want to animate a list of tasks that can be reordered and filtered. Which approach correctly uses the animate:flip directive to ensure smooth animations when tasks move or disappear?

{`

 showDone = !showDone}>Toggle Done


  {#each tasks.filter(t => showDone || !t.done) as task (task.id)}
    
{task.text}
  {/each}
`}

hard

A. The key should be the task text, not task.id, for proper animation.

B. This code correctly uses a keyed {#each} block with animate:flip, animating reorder and filtering smoothly.

C. animate:flip cannot animate filtered lists; a transition directive is needed instead.

D. The filter inside {#each} breaks animation; tasks must be filtered outside the block.

Solution

1. Step 1: Analyze the use of filtering and keyed each block

   The code filters tasks inline and uses a keyed {#each} block with task.id as key, which is correct for tracking items uniquely.

2. Step 2: Confirm animate:flip usage for reorder and filtering

   Using animate:flip on the li elements animates position changes smoothly when tasks reorder or disappear due to filtering.

3. Final Answer:

   This code correctly uses a keyed {#each} block with animate:flip, animating reorder and filtering smoothly. -> Option B

4. Quick Check:

   Keyed filtered list + animate:flip = smooth reorder & filter animation [OK]

Hint: Key filtered list with unique id and animate:flip for smooth moves [OK]

Common Mistakes:

• Not keying filtered items uniquely
• Filtering outside {#each} causing stale keys
• Using text as key instead of unique id