mirror of https://github.com/sveltejs/svelte
21 lines
461 B
21 lines
461 B
---
|
|
title: The transition directive
|
|
---
|
|
|
|
We can make more appealing user interfaces by gracefully transitioning elements into and out of the DOM. Svelte makes this very easy with the `transition` directive.
|
|
|
|
First, import the `fade` function from `svelte/transition`...
|
|
|
|
```svelte
|
|
<script>
|
|
import { fade } from 'svelte/transition';
|
|
let visible = true;
|
|
</script>
|
|
```
|
|
|
|
...then add it to the `<p>` element:
|
|
|
|
```svelte
|
|
<p transition:fade>Fades in and out</p>
|
|
```
|