Custom transitions in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a custom transition in Svelte?

A custom transition in Svelte is a way to create your own animation effect when elements enter or leave the DOM, using JavaScript functions to control how the element changes over time.

intermediate

Which function signature is used to create a custom transition in Svelte?

A custom transition function takes a node and parameters, and returns an object with a 'css' function that defines the animation styles over time, and optionally a 'tick' function for JavaScript updates.

beginner

How do you apply a custom transition to an element in Svelte?

You import the custom transition function and use the 'transition:' directive on the element, passing the function and any parameters, like <div transition:myTransition={{ duration: 500 }}></div>.

intermediate

What does the 'css' function inside a custom transition return?

The 'css' function returns a string of CSS styles that change over time, using the progress parameter (from 0 to 1) to animate properties like opacity or transform.

intermediate

Why might you use a custom transition instead of built-in ones in Svelte?

Custom transitions let you create unique animations tailored to your design, beyond the simple fade or slide, giving you full control over timing, easing, and style changes.

What parameter does the 'css' function in a custom transition receive?

A The DOM node itself

B A progress value from 0 to 1

C The event object

D The transition duration in milliseconds

The 'css' function receives a progress value between 0 and 1 that represents how far the transition has progressed.

How do you trigger a custom transition on an element in Svelte?

A By calling a JavaScript animation library

B Using the 'animate:' directive

C Using the 'transition:' directive with the custom function

D By adding a CSS class manually

Svelte uses the 'transition:' directive to apply custom transition functions to elements.

Which of these is NOT part of a custom transition function's return object?

A 'render' function

B 'tick' function

C 'duration' number

D 'css' function

The return object can include 'css', 'tick', and 'duration', but not a 'render' function.

What does the 'tick' function in a custom transition do?

A Runs JavaScript code on each animation frame

B Defines CSS styles for the transition

C Sets the transition duration

D Handles user input events

The 'tick' function lets you run JavaScript code on every frame of the transition for more complex animations.

Which Svelte directive is used to import and apply a custom transition?

A use:

B animate:

C bind:

D transition:

The 'transition:' directive is used to apply custom transitions to elements.

Explain how to create and use a custom transition in Svelte.

Think about the function signature and how Svelte applies transitions.

Describe the difference between the 'css' and 'tick' functions in a custom transition.

One is for CSS, the other for JavaScript during animation.