Transitions allow elements to enter and leave the DOM gracefully, rather than suddenly appearing and disappearing.
Transitions allow elements to enter and leave the DOM gracefully, rather than suddenly appearing and disappearing.
```html
```html
<!-- { title: 'Transitions' } -->
<!-- { title: 'Transitions' } -->
<script>
<script>
import { fade } from 'svelte/transition.js';
import { fade } from 'svelte/transition';
let visible = false;
let visible = false;
</script>
</script>
@ -21,12 +19,12 @@ Transitions allow elements to enter and leave the DOM gracefully, rather than su
{/if}
{/if}
```
```
Transitions can have parameters — typically `delay` and `duration`, but often others, depending on the transition in question. For example, here's the `fly` transition from the [svelte-transitions](https://github.com/sveltejs/svelte-transitions) package:
Transitions can have parameters — typically `delay` and `duration`, but often others, depending on the transition in question. For example, here's the `fly` transition:
```html
```html
<!-- { title: 'Transition with parameters' } -->
<!-- { title: 'Transition with parameters' } -->
<script>
<script>
import { fly } from 'svelte-transitions';
import { fly } from 'svelte/transition';
let visible = false;
let visible = false;
</script>
</script>
@ -37,6 +35,9 @@ Transitions can have parameters — typically `delay` and `duration`, but often
{/if}
{/if}
```
```
### In and out
An element can have separate `in` and `out` transitions:
An element can have separate `in` and `out` transitions:
```html
```html
@ -53,7 +54,27 @@ An element can have separate `in` and `out` transitions:
{/if}
{/if}
```
```
Transitions are simple functions that take a `node` and any provided `parameters` and return an object with the following properties:
### Built-in transitions
Svelte comes with a handful of ready-to-use transitions:
```html
<!-- { repl: false } -->
<script>
import {
fade,
fly,
slide,
draw
} from 'svelte/transition';
</script>
```
### Custom transitions
You can also make your own. Transitions are simple functions that take a `node` and any provided `parameters` and return an object with the following properties:
* `duration` — how long the transition takes in milliseconds
* `duration` — how long the transition takes in milliseconds
* `delay` — milliseconds before the transition starts
* `delay` — milliseconds before the transition starts
Rich Harris
6 years ago
