Transition parameters (duration, delay) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a fade transition with a duration of 500ms.

Svelte

<script>
  import { fade } from 'svelte/transition';
</script>

<div transition:fade={{ duration: [1] }}>
  Hello, Svelte!
</div>

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

A500

B1000

C50

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using duration as a string instead of a number.

Forgetting to wrap the duration value in curly braces.

The duration parameter controls how long the transition lasts in milliseconds. Here, 500 means the fade will take half a second.

2fill in blank

medium

Complete the code to add a slide transition with a delay of 300ms.

Svelte

<script>
  import { slide } from 'svelte/transition';
</script>

<p transition:slide={{ delay: [1] }}>
  Slide me in!
</p>

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

A100

B300

C0

D600

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing delay with duration.

Using delay as a string instead of a number.

The delay parameter sets how long to wait before starting the transition. 300 means it waits 300 milliseconds before sliding.

3fill in blank

hard

Fix the error in the code to correctly apply a fade transition with a 700ms duration.

Svelte

<script>
  import { fade } from 'svelte/transition';
</script>

<div transition:fade={{ duration: [1] }}>
  Fade me!
</div>

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

A'700ms'

B"700"

C700

D0.7

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the duration value in quotes.

Using a string with units like '700ms'.

The duration must be a number representing milliseconds, not a string or a decimal.

4fill in blank

hard

Fill both blanks to create a fade transition with 400ms duration and 200ms delay.

Svelte

<script>
  import { fade } from 'svelte/transition';
</script>

<span transition:fade={{ duration: [1], delay: [2] }}>
  Smooth fade!
</span>

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

A400

B200

C100

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping duration and delay values.

Using strings instead of numbers.

The duration is how long the fade lasts, and delay is how long to wait before starting it.

5fill in blank

hard

Fill all three blanks to create a slide transition with 600ms duration, 150ms delay, and easing set to cubicInOut.

Svelte

<script>
  import { slide } from 'svelte/transition';
  import { cubicInOut } from 'svelte/easing';
</script>

<div transition:slide={{ duration: [1], delay: [2], easing: [3] }}>
  Slide with easing!
</div>

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

A600

B150

CcubicInOut

Dlinear

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings for duration or delay.

Not importing or using the easing function correctly.

Duration and delay are numbers in milliseconds. Easing is a function imported from svelte/easing to control the speed curve.