In and out transitions in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are in and out transitions in Svelte?

In and out transitions in Svelte are animations that run when a component or element enters (in) or leaves (out) the DOM. They help make UI changes smooth and visually clear.

beginner

How do you apply an in transition to an element in Svelte?

Use the in: directive followed by the transition function name, like in:fade. For example: <div in:fade>Hello</div>.

beginner

Name two built-in transitions provided by Svelte.

Two built-in transitions are fade (fades element in/out) and slide (slides element in/out from a direction).

beginner

What is the difference between in: and out: directives in Svelte?

in: runs the transition when an element appears in the DOM. out: runs the transition when the element is removed from the DOM.

intermediate

How can you customize the duration of a Svelte transition?

Pass an options object to the transition function, like in:fade={{ duration: 500 }} to make the fade last 500 milliseconds.

Which directive applies a transition when an element is removed from the DOM in Svelte?

A out:

B in:

C transition:

D animate:

The out: directive runs the transition when the element leaves the DOM.

What does the built-in fade transition do in Svelte?

A Slides the element in and out

B Rotates the element

C Changes the element's opacity gradually

D Scales the element up and down

The fade transition changes the element's opacity smoothly to appear or disappear.

How do you specify a 1-second duration for a fade transition in Svelte?

A transition:fade duration=1000

B in:fade(1000)

C fade:duration=1000

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

You pass an options object with duration like in:fade={{ duration: 1000 }}.

Which of these is NOT a built-in Svelte transition?

A bounce

B fly

C slide

D fade

bounce is not a built-in transition in Svelte.

What happens if you use both in: and out: on the same element?

A Only the in transition runs

B Both transitions run on enter and leave respectively

C It causes an error

D Only the out transition runs

Both transitions run: in: when the element appears, out: when it disappears.

Explain how to add a fade-in and fade-out effect to a Svelte element using built-in transitions.

Think about how to tell Svelte what to do when the element appears and disappears.

Describe the difference between in and out transitions in Svelte and when each runs.

Consider the element's lifecycle in the page.