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.

Practice

1. In Svelte, what does the duration parameter control in a transition?

easy

A. How long to wait before starting the animation

B. The size of the animated element

C. The color of the animated element

D. How long the animation lasts

Solution

1. Step 1: Understand transition parameters

   The duration parameter defines the length of time the animation runs.

2. Step 2: Differentiate from delay

   The delay parameter controls waiting time before animation starts, not duration.

3. Final Answer:

   How long the animation lasts -> Option D

4. Quick Check:

   duration = animation length [OK]

Hint: Duration means how long animation runs, not when it starts [OK]

Common Mistakes:

• Confusing duration with delay
• Thinking duration changes color or size
• Mixing up parameter names

2. Which of the following is the correct syntax to set a 500ms delay in a Svelte transition?

easy

A. transition:fade(delay: 500)

B. transition:fade(delay=500)

C. transition:fade={{ delay: 500 }}

D. transition:fade({ delay 500 })

Solution

1. Step 1: Recall Svelte transition syntax

   Transition parameters are passed as an object inside double curly braces, e.g., transition:fade={{ delay: 500 }}.

2. Step 2: Identify correct object syntax

   transition:fade={{ delay: 500 }} uses correct object syntax with colon and braces; others have invalid syntax.

3. Final Answer:

   transition:fade={{ delay: 500 }} -> Option C

4. Quick Check:

   Use double braces and colon for parameters [OK]

Hint: Use double curly braces and colon for transition params [OK]

Common Mistakes:

• Using parentheses instead of braces
• Missing colon between key and value
• Incorrect object syntax

3. What will happen when this Svelte code runs?

<div transition:fade={{ duration: 1000, delay: 500 }}>Hello</div>

medium

A. The div fades in after 0.5 seconds and the fade lasts 1 second

B. The div fades in immediately over 1 second

C. The div fades in after 1 second and the fade lasts 0.5 seconds

D. The div fades in instantly with no animation

Solution

1. Step 1: Understand delay and duration

   The delay: 500 means wait 500ms before starting the fade.

2. Step 2: Understand duration effect

   The duration: 1000 means the fade animation lasts 1000ms (1 second).

3. Final Answer:

   The div fades in after 0.5 seconds and the fade lasts 1 second -> Option A

4. Quick Check:

   delay = wait, duration = animation length [OK]

Hint: Delay waits before animation; duration controls animation length [OK]

Common Mistakes:

• Mixing up delay and duration values
• Assuming animation starts immediately
• Ignoring delay effect

4. Identify the error in this Svelte transition code:

<div transition:fade={{ duration: '1000', delay: 200 }}>Hi</div>

medium

A. Missing parentheses around parameters

B. Duration should be a number, not a string

C. Fade transition does not accept parameters

D. Delay cannot be less than 500

Solution

1. Step 1: Check parameter types

   Duration and delay must be numbers, not strings. Here, duration is a string '1000'.

2. Step 2: Validate other options

   Delay can be any number >= 0; fade accepts parameters; no parentheses needed.

3. Final Answer:

   Duration should be a number, not a string -> Option B

4. Quick Check:

   Use numbers for duration and delay [OK]

Hint: Use numbers, not strings, for duration and delay [OK]

Common Mistakes:

• Putting numbers in quotes
• Assuming delay minimum is 500
• Adding unnecessary parentheses

5. You want a Svelte element to fade in with a 2-second animation but only start after 1 second delay. Which code correctly achieves this?

hard

A. <div transition:fade={{ duration: 2000, delay: 1000 }}>Content</div>

B. <div transition:fade={{ delay: 2000, duration: 1000 }}>Content</div>

C. <div transition:fade={{ duration: '2000', delay: '1000' }}>Content</div>

D. <div transition:fade={{ duration: 1000 }} delay=2000>Content</div>

Solution

1. Step 1: Match duration and delay values

   Duration should be 2000ms (2 seconds), delay should be 1000ms (1 second).

2. Step 2: Check syntax correctness

   <div transition:fade={{ duration: 2000, delay: 1000 }}>Content</div> uses correct syntax with numbers and proper object format.

3. Step 3: Identify errors in other options

   Using strings like '2000' and '1000' for duration and delay is incorrect (must be numbers); swapping to {{ delay: 2000, duration: 1000 }} is wrong; placing delay=2000 outside the transition directive is invalid.

4. Final Answer:

   <div transition:fade={{ duration: 2000, delay: 1000 }}>Content</div> -> Option A

5. Quick Check:

   Correct values and syntax for delay and duration [OK]

Hint: Duration = animation length; delay = wait time before start [OK]

Common Mistakes:

• Swapping delay and duration values
• Using strings instead of numbers
• Placing delay outside transition directive