Transitions
Our app looks great already, but we could improve the user experience a bit with some transitions between the various views. With Svelte, this is available within the framework itself.
Svelte transitions
Svelte offers multiple pre-made transitions in the svelte/transition package. As of writing, there are six of them: blur, draw, fade, fly, and scale, slide. We will leave it as an exercise to the reader to try them and see their behavior!
Applying transitions
Transitions can only be applied to elements (that is, HTML tags) and not to Svelte components.
To make a DOM element transition nicely when appearing or disappearing, we just need to add a transition: property to its tag, followed by the name of the transition function. For example, take this snippet:
<button on:click={() => show = !show}>Click me</button>
{#if show}<p transition:blur>Hello world!</p>{/if}
<script>
import {blur} from 'svelte/transition'...