Custom transitions in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte custom transition?

Consider this Svelte component using a custom fade transition. What will be the opacity of the element at half the transition duration?

Svelte

<script>
  import { cubicOut } from 'svelte/easing';

  function fade(node, { delay = 0, duration = 400 }) {
    return {
      delay,
      duration,
      css: t => `opacity: ${t}; transform: scale(${t});`,
      easing: cubicOut
    };
  }
</script>

<div transition:fade={{ duration: 400 }}>
  Hello!</div>

A Opacity is 0.5 and scale is 0.5 at half duration

B Opacity is 0 and scale is 0 at half duration

C Opacity is about 0.875 and scale is about 0.875 at half duration

D Opacity is 1 and scale is 1 immediately at half duration

💡 Hint

The easing function cubicOut makes the transition faster at the start and slower at the end.

The transition uses cubicOut easing, so at half the duration the opacity and scale are about 0.875, not exactly 0.5.

📝 Syntax

intermediate

Which option correctly defines a Svelte custom transition function?

Choose the option that correctly defines a custom transition function in Svelte that changes opacity from 0 to 1 over the given duration.

A function fade(node, { duration }) { return { duration, css: t => `opacity: ${t}` }; }

B function fade(node, duration) { return { duration, css: t => `opacity: ${t}` }; }

C function fade(node, { duration }) { return { duration, css: t => `opacity: 1 - t` }; }

D function fade(node, { duration }) { return { css: t => `opacity: ${t}` }; }

💡 Hint

The transition function receives the node and an object with parameters.

Option A correctly destructures the parameter object and returns an object with duration and css function.

🔧 Debug

advanced

Why does this custom transition not animate the element?

This Svelte component uses a custom transition but the element appears instantly without animation. What is the cause?

Svelte

<script>
  function slide(node) {
    return {
      duration: 300,
      css: t => `transform: translateX(${t * 100}px);`
    };
  }
</script>

<div transition:slide>
  Slide me
</div>

A The transition function is missing the easing property, so it does not animate.

B The css function uses t from 0 to 1 but translateX should go from 100px to 0px, so the direction is reversed.

C The transition function must return a tick function, not css.

D The transition function must use 'in:' or 'out:' instead of 'transition:'.

💡 Hint

Check the range of t and how it affects translateX value.

The css function moves from 0px to 100px instead of from 100px to 0px, so the element jumps instantly to 0px position.

❓ state_output

advanced

What is the final style of the element after this custom transition completes?

Given this Svelte custom transition, what style will the element have after the transition finishes?

Svelte

<script>
  function grow(node, { duration = 500 }) {
    return {
      duration,
      css: t => `transform: scale(${t}); opacity: ${t}`
    };
  }
</script>

<div transition:grow={{ duration: 500 }}>
  Grow me
</div>

A transform: scale(1); opacity: 1

B transform: scale(0); opacity: 0

C transform: scale(0.5); opacity: 0.5

D transform: scale(1); opacity: 0

💡 Hint

At the end of the transition, t equals 1.

The css function uses t from 0 to 1, so at the end t=1 means scale(1) and opacity 1.

🧠 Conceptual

expert

Which statement about Svelte custom transitions is true?

Select the correct statement about how custom transitions work in Svelte.

A Svelte applies custom transitions only on elements with the 'in:' directive, not 'transition:'.

B Custom transitions must always use the tick function to update styles frame by frame.

C The transition function must return a Promise that resolves when the animation ends.

D The css function receives a parameter t that goes from 0 to 1 during the transition and returns a CSS string applied to the element.

💡 Hint

Think about the role of the css function in custom transitions.

The css function receives t from 0 to 1 and returns CSS styles that Svelte applies during the transition.