Custom transitions in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the built-in fade transition from Svelte.

Svelte

import { [1] } from 'svelte/transition';

Drag options to blanks, or click blank then click option'

Aslide

Bfade

Cfly

Dscale

Attempts:

3 left

💡 Hint

Common Mistakes

Using a transition name that is not imported from 'svelte/transition'.

Forgetting to import the transition before using it.

The fade transition is imported from svelte/transition to create a fade effect.

2fill in blank

medium

Complete the code to apply a fade transition to the div when it appears or disappears.

Svelte

<div transition:[1]>{{message}}</div>

Drag options to blanks, or click blank then click option'

Afade

Bslide

Cfly

Dscale

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong transition name that was not imported.

Missing the colon after 'transition'.

The transition:fade directive applies the fade effect to the element.

3fill in blank

hard

Fix the error in the custom transition function to return the correct object shape.

Svelte

function customFade(node, { duration = 400 } = {}) {
  return {
    [1]: duration,
    css: t => `opacity: ${t}`
  };
}

Drag options to blanks, or click blank then click option'

Aduration

Bdelay

Ceasing

Dtick

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name other than 'duration' causes the transition to not work.

Forgetting to return an object with the correct keys.

The returned object must have a duration property to specify how long the transition lasts.

4fill in blank

hard

Fill both blanks to create a custom transition that changes opacity and scales the element.

Svelte

function scaleFade(node, { duration = 300 } = {}) {
  return {
    [1]: duration,
    css: t => `opacity: ${t}; transform: scale(${ [2] });`
  };
}

Drag options to blanks, or click blank then click option'

Aduration

B1 - t

Ct

Ddelay

Attempts:

3 left

💡 Hint

Common Mistakes

Using '1 - t' for scale causes the element to shrink instead of grow.

Missing the duration property or misspelling it.

The duration property sets how long the transition lasts, and t controls the scale from 0 to 1 as the transition progresses.

5fill in blank

hard

Fill all three blanks to use the custom transition with parameters in the component.

Svelte

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

  function customTransition(node, { delay = 0, duration = 400, easing = cubicOut } = {}) {
    return {
      [1]: delay,
      duration: duration,
      easing: easing,
      css: t => `opacity: ${t}; transform: translateX(${(1 - t) * 100}px);`
    };
  }
</script>

<div transition:customTransition={{ delay: [2], duration: [3] }}>
  Slide and fade in
</div>

Drag options to blanks, or click blank then click option'

Adelay

B100

C500

Dduration

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing delay and duration property names.

Passing numbers without curly braces in the transition directive.

The first blank is the property name delay in the returned object. The second and third blanks are the values for delay and duration passed to the transition in the component.