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.
110 lines
2.7 KiB
110 lines
2.7 KiB
---
|
|
title: Transitions
|
|
---
|
|
|
|
|
|
Transitions allow elements to enter and leave the DOM gracefully, rather than suddenly appearing and disappearing.
|
|
|
|
```html
|
|
<!-- { title: 'Transitions' } -->
|
|
<script>
|
|
import { fade } from 'svelte/transition';
|
|
let visible = false;
|
|
</script>
|
|
|
|
<input type=checkbox bind:checked={visible}> visible
|
|
|
|
{#if visible}
|
|
<p transition:fade>fades in and out</p>
|
|
{/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:
|
|
|
|
```html
|
|
<!-- { title: 'Transition with parameters' } -->
|
|
<script>
|
|
import { fly } from 'svelte/transition';
|
|
let visible = false;
|
|
</script>
|
|
|
|
<input type=checkbox bind:checked={visible}> visible
|
|
|
|
{#if visible}
|
|
<p transition:fly="{{y: 200, duration: 1000}}">flies 200 pixels up, slowly</p>
|
|
{/if}
|
|
```
|
|
|
|
|
|
### In and out
|
|
|
|
An element can have separate `in` and `out` transitions:
|
|
|
|
```html
|
|
<!-- { title: 'Transition in/out' } -->
|
|
<script>
|
|
import { fade, fly } from 'svelte-transitions';
|
|
let visible = false;
|
|
</script>
|
|
|
|
<input type=checkbox bind:checked={visible}> visible
|
|
|
|
{#if visible}
|
|
<p in:fly="{y: 50}" out:fade>flies up, fades out</p>
|
|
{/if}
|
|
```
|
|
|
|
|
|
### 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
|
|
* `delay` — milliseconds before the transition starts
|
|
* `easing` — an [easing function](https://github.com/rollup/eases-jsnext)
|
|
* `css` — a function that accepts an argument `t` between 0 and 1 and returns the styles that should be applied at that moment
|
|
* `tick` — a function that will be called on every frame, with the same `t` argument, while the transition is in progress
|
|
|
|
Of these, `duration` is required, as is *either* `css` or `tick`. The rest are optional. Here's how the `fade` transition is implemented, for example:
|
|
|
|
```html
|
|
<!-- { title: 'Fade transition' } -->
|
|
<script>
|
|
function fade(node, { delay = 0, duration = 400 }) {
|
|
const o = +getComputedStyle(node).opacity;
|
|
|
|
return {
|
|
delay,
|
|
duration,
|
|
css: t => `opacity: ${t * o}`
|
|
};
|
|
}
|
|
|
|
let visible = false;
|
|
</script>
|
|
|
|
<input type=checkbox bind:checked={visible}> visible
|
|
|
|
{#if visible}
|
|
<p transition:fade>fades in and out</p>
|
|
{/if}
|
|
```
|
|
|
|
> If the `css` option is used, Svelte will create a CSS animation that runs efficiently off the main thread. Therefore if you can achieve an effect using `css` rather than `tick`, you should. |