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.