Transition parameters (duration, delay) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the duration parameter control in a Svelte transition?

The duration parameter sets how long the transition animation lasts, measured in milliseconds.

beginner

How does the delay parameter affect a Svelte transition?

The delay parameter sets how long Svelte waits before starting the transition, measured in milliseconds.

beginner

Show the syntax to apply a fade transition with a 500ms duration and 200ms delay in Svelte.

Use transition:fade={{ duration: 500, delay: 200 }} on the element to set a fade that lasts 500ms and starts after 200ms.

intermediate

Why would you use a delay in a transition?

Delay helps to wait before the animation starts, useful for sequencing animations or avoiding abrupt changes.

beginner

Can you combine duration and delay in one transition? How?

Yes, by passing an object with both properties like { duration: 400, delay: 100 } inside the transition directive.

What unit do duration and delay use in Svelte transitions?

A Milliseconds

B Seconds

C Frames

D Percentage

Both duration and delay are measured in milliseconds in Svelte transitions.

If you want a transition to start immediately but last 1 second, what should you set?

A duration: 1000, delay: 1000

B duration: 0, delay: 1000

C duration: 1000, delay: 0

D duration: 0, delay: 0

Setting delay: 0 means no wait before start, and duration: 1000 means the animation lasts 1 second.

What happens if you set a delay longer than the duration?

A The transition is ignored

B The transition runs instantly

C The transition duration doubles

D The transition waits longer before starting than it takes to finish

Delay controls wait time before start; duration controls how long the animation runs after starting.

Which is the correct way to add a fade transition with 300ms delay and 700ms duration?

A transition:fade={{ delay: 300, duration: 700 }}

B transition:fade={{ duration: 300, delay: 700 }}

C transition:fade={{ delay: 700, duration: 300 }}

D transition:fade={{ duration: 1000 }}

The object keys must match the intended delay and duration values.

Why might you want to use a delay in a transition?

A To stop the animation

B To start the animation after a pause

C To change the color of the element

D To make the animation faster

Delay adds a pause before the animation begins, useful for timing effects.

Explain how to control the timing of a Svelte transition using duration and delay parameters.

Think about waiting and running times for animations.

Describe a real-life example where adding a delay to a transition would improve user experience.

Imagine waiting your turn in a conversation.