@ -40,6 +42,8 @@ You can see the `fade` transition in action in the [transition tutorial](/tutori
## `blur`
## `blur`
> EXPORT_SNIPPET: svelte/transition#blur
```svelte
```svelte
transition:blur={params}
transition:blur={params}
```
```
@ -74,6 +78,8 @@ Animates a `blur` filter alongside an element's opacity.
## `fly`
## `fly`
> EXPORT_SNIPPET: svelte/transition#fly
```svelte
```svelte
transition:fly={params}
transition:fly={params}
```
```
@ -117,6 +123,8 @@ You can see the `fly` transition in action in the [transition tutorial](/tutoria
## `slide`
## `slide`
> EXPORT_SNIPPET: svelte/transition#slide
```svelte
```svelte
transition:slide={params}
transition:slide={params}
```
```
@ -154,6 +162,8 @@ Slides an element in and out.
## `scale`
## `scale`
> EXPORT_SNIPPET: svelte/transition#scale
```svelte
```svelte
transition:scale={params}
transition:scale={params}
```
```
@ -191,6 +201,8 @@ Animates the opacity and scale of an element. `in` transitions animate from an e
## `draw`
## `draw`
> EXPORT_SNIPPET: svelte/transition#draw
```svelte
```svelte
transition:draw={params}
transition:draw={params}
```
```
@ -236,6 +248,8 @@ The `speed` parameter is a means of setting the duration of the transition relat
## `crossfade`
## `crossfade`
> EXPORT_SNIPPET: svelte/transition#crossfade
The `crossfade` function creates a pair of [transitions](/docs/element-directives#transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
The `crossfade` function creates a pair of [transitions](/docs/element-directives#transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
A number of [community-maintained preprocessing plugins](https://sveltesociety.dev/tools#preprocessors) are available to allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less.
A number of [community-maintained preprocessing plugins](https://sveltesociety.dev/tools#preprocessors) are available to allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less.
You can write your own preprocessor using the `svelte.preprocess` API.
You can write your own preprocessor using the `svelte.preprocess` API.