```js
// @noErrors
import {
	blur,
	crossfade,
	draw,
	fade,
	fly,
	scale,
	slide
} from 'svelte/transition';
```

## 
模糊

动画元素的不透明度同时应用一个`模糊`滤镜。

```dts
function blur(
	node: Element,
	{
		delay,
		duration,
		easing,
		amount,
		opacity
	}?: BlurParams | undefined
): TransitionConfig;
```

## 
渐变

The `crossfade` 函数创建了一对名为 `send` 和 `receive` 的 [转换](/docs/svelte/transition)。当一个元素被 'sent' 时，它会寻找一个对应的正在 'received' 的元素，并生成一个将元素转换到对应元素位置并淡出的转换。当一个元素被 'received' 时，发生相反的情况。如果没有对应元素，则使用 `fallback` 转换。

```dts
function crossfade({
	fallback,
	...defaults
}: CrossfadeParams & {
	fallback?: (
		node: Element,
		params: CrossfadeParams,
		intro: boolean
	) => TransitionConfig;
}): [
	(
		node: any,
		params: CrossfadeParams & {
			key: any;
		}
	) => () => TransitionConfig,
	(
		node: any,
		params: CrossfadeParams & {
			key: any;
		}
	) => () => TransitionConfig
];
```

## 
繪製

动画化 SVG 元素的描边，就像管子里的蛇。\``in`\` 过渡从不可见路径开始，随着时间的推移在屏幕上绘制路径。\``out`\` 过渡从可见状态开始，逐渐擦除路径。\``draw`\` 只与具有 \``getTotalLength`\` 方法的元素一起使用，如 \``<path>`\` 和 \``<polyline>`\`。

```dts
function draw(
	node: SVGElement & {
		getTotalLength(): number;
	},
	{
		delay,
		speed,
		duration,
		easing
	}?: DrawParams | undefined
): TransitionConfig;
```

## 
淡化

动画元素的不透明度从 0 到当前不透明度，用于`in`过渡，以及从当前不透明度到 0，用于`out`过渡。

```dts
function fade(
	node: Element,
	{ delay, duration, easing }?: FadeParams | undefined
): TransitionConfig;
```

## 
飞

动画元素的水平位置和垂直位置以及不透明度。\``in`\` 过渡从提供的值（作为参数传递给元素的默认值）动画。\``out`\` 过渡从元素的默认值动画到提供的值。

```dts
function fly(
	node: Element,
	{
		delay,
		duration,
		easing,
		x,
		y,
		opacity
	}?: FlyParams | undefined
): TransitionConfig;
```

## 
比例

动画元素的不透明度和缩放。\``in`\` 过渡将动画从提供的参数值过渡到元素的当前（默认）值。\``out`\` 过渡将动画从元素的默认值过渡到提供的值。

```dts
function scale(
	node: Element,
	{
		delay,
		duration,
		easing,
		start,
		opacity
	}?: ScaleParams | undefined
): TransitionConfig;
```

## 
幻灯片

滑动元素进出。

```dts
function slide(
	node: Element,
	{
		delay,
		duration,
		easing,
		axis
	}?: SlideParams | undefined
): TransitionConfig;
```

## 
模糊参数

`接口 BlurParams {/*…*/}`

`延迟?: number;`

`持续时间?: 数字;`

`是否使用缓动函数?: EasingFunction;`

`数量?: 数字 | 字符串;`

`不透明度?: 数字;`

## 
交叉淡入淡出参数

```dts
interface CrossfadeParams {/*…*/}
```

`延迟?: number;`

```dts
duration?: number | ((len: number) => number);
```

`是否使用缓动函数?: EasingFunction;`

## 
绘图参数

`DrawParams 接口 {/*…*/}`

`延迟?: number;`

`speed?: 数字；`

```dts
duration?: number | ((len: number) => number);
```

`是否使用缓动函数?: EasingFunction;`

## EasingFunction

```dts
type EasingFunction = (t: number) => number;
```

## FadeParams

`接口 FadeParams {/*…*/}`

`延迟?: number;`

`持续时间?: 数字;`

`是否使用缓动函数?: EasingFunction;`

## 
飞参

`接口 FlyParams {/*…*/}`

`延迟?: number;`

`持续时间?: 数字;`

`是否使用缓动函数?: EasingFunction;`

`x?: 数字 | 字符串;`

`y?: 数字 | 字符串;`

`不透明度?: 数字;`

## 
缩放参数

```dts
interface ScaleParams {/*…*/}
```

`延迟?: number;`

`持续时间?: 数字;`

`是否使用缓动函数?: EasingFunction;`

`start?: 数字；`

`不透明度?: 数字;`

## 
幻灯片参数

```dts
interface SlideParams {/*…*/}
```

`延迟?: number;`

`持续时间?: 数字;`

`是否使用缓动函数?: EasingFunction;`

```dts
axis?: 'x' | 'y';
```

## 
过渡配置

```dts
interface TransitionConfig {/*…*/}
```

`延迟?: number;`

`持续时间?: 数字;`

`是否使用缓动函数?: EasingFunction;`

```dts
css?: (t: number, u: number) => string;
```

```dts
tick?: (t: number, u: number) => void;
```