Transition directive (transition:fade) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the transition:fade directive do in Svelte?

It smoothly changes the opacity of an element when it enters or leaves the DOM, creating a fading effect.

beginner

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

Add transition:fade inside the element's tag, like <div transition:fade>...</div>.

intermediate

Can you customize the duration of the fade transition in Svelte? How?

Yes, by passing an object with options like { duration: 500 } to fade, e.g., transition:fade={{ duration: 500 }}.

beginner

What happens if you remove an element with transition:fade applied?

The element fades out smoothly before it is removed from the DOM.

beginner

Why is using transition:fade better than instantly hiding elements?

Because it creates a smooth visual effect that is easier on the eyes and improves user experience by showing changes clearly.

What does transition:fade control in Svelte?

A Opacity of an element during enter and leave

B Position of an element on the screen

C Background color change

D Font size animation

transition:fade changes the opacity smoothly when elements appear or disappear.

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

A <code>transition:fade(1000)</code>

B <code>transition:fade={{ duration: 1000 }}</code>

C <code>fade-duration=1000</code>

D <code>transition:fade-duration=1000</code>

You pass an object with duration in milliseconds inside double curly braces.

When does the fade-out effect happen?

A When the element is added to the DOM

B When the page loads

C When the element is clicked

D When the element is removed from the DOM

The fade-out happens as the element leaves the DOM, making it disappear smoothly.

Which import is needed to use fade in Svelte?

A <code>import { fade } from 'svelte/effects';</code>

B <code>import fade from 'svelte/fade';</code>

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

D No import needed

You must import fade from svelte/transition to use it.

What is the default duration of fade transition if not specified?

A 400 milliseconds

B 1000 milliseconds

C 200 milliseconds

D No duration, instant

The default fade duration in Svelte is 400ms if you don't set it.

Explain how to add a fade transition to an element in Svelte and customize its duration.

Think about the directive syntax and import statement.

Describe what happens visually when an element with transition:fade is removed from the page.

Focus on the fade-out behavior.