Transition parameters (duration, delay) in Svelte - Step-by-Step Execution

Concept Flow - Transition parameters (duration, delay)

Component mounts

↓

Transition starts

↓

Check delay

↓

Wait delay

↓

Animate over duration

↓

Transition ends

↓

Component fully visible

When a component appears, Svelte waits for the delay, then animates the transition over the duration time before finishing.

Execution Sample

Svelte

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

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

This code fades in a div with a 500ms delay and a 1000ms fade duration.

Execution Table

Step	Action	Delay Timer	Animation Progress	Output
1	Component mounts	0ms	0%	Div hidden
2	Start delay timer	0ms	0%	Waiting...
3	Delay timer at 500ms	500ms	0%	Delay finished, start animation
4	Animation starts	500ms	0%	Div begins fading in
5	Animation at 250ms	500ms	25%	Div partially visible
6	Animation at 500ms	500ms	50%	Div half visible
7	Animation at 750ms	500ms	75%	Div mostly visible
8	Animation at 1000ms	500ms	100%	Div fully visible
9	Transition ends	500ms	100%	Div fully visible, transition complete

💡 Animation completes after duration (1000ms) following delay (500ms).

Variable Tracker

Variable	Start	After Delay	Mid Animation	End Animation
delayTimer	0ms	500ms	500ms	500ms
animationProgress	0%	0%	50%	100%
divOpacity	0	0	0.5	1

Key Moments - 2 Insights

Why does the div stay hidden at the start even though the component is mounted?

Because the delay parameter causes Svelte to wait before starting the animation, as shown in execution_table row 2 and 3.

What happens if duration is set to 0?

The animation jumps instantly to fully visible after the delay, skipping gradual fade steps, as duration controls animation length.

Visual Quiz - 3 Questions

Look at the execution table, what is the animation progress at step 6?

A 50%

B 0%

C 25%

D 75%

💡 Hint

Check the 'Animation Progress' column at step 6 in the execution_table.

At which step does the delay finish and animation start?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look for when 'Delay finished, start animation' appears in the 'Output' column.

If delay is set to 0, how would the execution table change?

A Animation would never start

B Delay timer would stay at 0ms and animation starts immediately

C Animation progress would start at 50%

D Delay timer would increase beyond 500ms

💡 Hint

Refer to the 'Delay Timer' and 'Output' columns in the execution_table for delay behavior.

Concept Snapshot

Svelte transitions use parameters like duration and delay.
- delay: wait time before animation starts
- duration: how long animation runs
Example: transition:fade={{ duration: 1000, delay: 500 }}
Delay pauses before fade begins.
Duration controls fade speed.
Useful for smooth, timed animations.

Full Transcript

When a Svelte component with a transition mounts, it first checks the delay parameter. If delay is set, Svelte waits that amount of time before starting the animation. After the delay, the animation runs over the duration time, gradually changing the component's appearance, such as fading in. For example, with a delay of 500 milliseconds and duration of 1000 milliseconds, the component stays hidden for 500ms, then fades in over 1 second. Variables like delayTimer track the waiting time, animationProgress tracks how far the animation has run, and divOpacity changes from 0 to 1 during the fade. This process ensures smooth, timed transitions that can be controlled precisely.

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