Transition parameters (duration, delay) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the visible effect of this Svelte transition code?

Consider this Svelte component snippet using a fade transition with a duration of 1000ms and a delay of 500ms:

<script>
  import { fade } from 'svelte/transition';
  let visible = false;
</script>

<button on:click={() => visible = !visible}>Toggle</button>

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

What will the user see when toggling the visibility on?

Svelte

<script>
  import { fade } from 'svelte/transition';
  let visible = false;
</script>

<button on:click={() => visible = !visible}>Toggle</button>

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

A The 'Hello' text appears after 0.5 seconds delay, then fades in over 1 second.

B The 'Hello' text appears immediately and fades in over 1 second.

C The 'Hello' text appears immediately and fades out over 1 second.

D The 'Hello' text appears after 1 second delay, then fades in instantly.

💡 Hint

Think about what the delay parameter does before the transition starts.

The delay parameter postpones the start of the fade effect by 500ms. After this delay, the fade transition runs for 1000ms, making the text appear gradually.

📝 Syntax

intermediate

Which option correctly sets a 2-second duration and 300ms delay for a Svelte slide transition?

Choose the correct syntax to apply a slide transition with a duration of 2000 milliseconds and a delay of 300 milliseconds.

A transition:slide({ duration: 2000, delay: 300 })

B transition:slide(duration=2000, delay=300)

C transition:slide={{ duration: 2000, delay: 300 }}

D transition:slide=[duration: 2000, delay: 300]

💡 Hint

Remember that Svelte transition parameters use double curly braces with key-value pairs.

The correct syntax uses double curly braces with an object: transition:slide={{ duration: 2000, delay: 300 }}. Other options use invalid syntax.

❓ state_output

advanced

What is the total time before the element fully appears with this transition?

Given this Svelte code snippet:

{#if show}
  <div transition:fly={{ duration: 1500, delay: 700 }}>Welcome</div>
{/if}

If show becomes true at time 0, after how many milliseconds will the element be fully visible?

Svelte

{#if show}
  <div transition:fly={{ duration: 1500, delay: 700 }}>Welcome</div>
{/if}

A 700 milliseconds

B 2200 milliseconds

C 1500 milliseconds

D 800 milliseconds

💡 Hint

Add the delay and duration times to find the total transition time.

The element waits 700ms (delay) before starting the 1500ms (duration) transition. Total time = 700 + 1500 = 2200ms.

🔧 Debug

advanced

Why does this Svelte transition not delay as expected?

Look at this Svelte code:

{#if visible}
  <div transition:fade={{ duration: 1000, delay: '500' }}>Hi</div>
{/if}

The developer expects a 500ms delay before fade starts, but the delay seems ignored. Why?

Svelte

{#if visible}
  <div transition:fade={{ duration: 1000, delay: '500' }}>Hi</div>
{/if}

A The delay value is a string instead of a number, so it is ignored.

B The fade transition does not support delay parameter.

C The duration must be a string, not a number.

D The transition must be wrapped in a function to accept parameters.

💡 Hint

Check the data type of the delay parameter.

Svelte expects delay as a number, not a string. Using a string causes the delay to be ignored.

🧠 Conceptual

expert

How do duration and delay parameters affect the lifecycle of a Svelte transition?

In Svelte transitions, what is the correct relationship between duration and delay parameters regarding the element's lifecycle during enter and leave?

A Delay controls the speed of the transition; duration postpones the element's insertion or removal.

B Duration delays the start of the transition; delay controls how long the transition runs, affecting element visibility timing.

C Delay and duration both control the total time the element stays visible before removal, but do not affect transition speed.

D Delay postpones the start of the transition; duration controls how long the transition runs after delay, affecting when the element is fully visible or removed.

💡 Hint

Think about what happens first: waiting or transitioning.

Delay waits before the transition starts. Duration is how long the transition effect lasts. Together, they determine when the element fully appears or disappears.

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