mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
18 lines
449 B
18 lines
449 B
6 years ago
|
---
|
||
|
title: In and out
|
||
|
---
|
||
|
|
||
5 years ago
|
Instead of the `transition` directive, an element can have an `in` or an `out` directive, or both together. Import `fade` alongside `fly`...
|
||
|
|
||
|
```js
|
||
|
import { fade, fly } from 'svelte/transition';
|
||
|
```
|
||
|
|
||
|
...then replace the `transition` directive with separate `in` and `out` directives:
|
||
6 years ago
|
|
||
1 year ago
|
```svelte
|
||
|
<p in:fly={{ y: 200, duration: 2000 }} out:fade>Flies in, fades out</p>
|
||
6 years ago
|
```
|
||
|
|
||
1 year ago
|
In this case, the transitions are _not_ reversed.
|