Skip to main content

svelte/transition

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

Animates a blur filter alongside an element’s opacity.

blur
,
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]

The crossfade function creates a pair of transitions 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.

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

Animates the stroke of an SVG element, like a snake in a tube. in transitions begin with the path invisible and draw the path to the screen over time. out transitions start in a visible state and gradually erase the path. draw only works with elements that have a getTotalLength method, like <path> and <polyline>.

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

Animates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions.

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

Animates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element’s default values. out transitions animate from the element’s default values to the provided values.

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

Animates the opacity and scale of an element. in transitions animate from the provided values, passed as parameters, to an element’s current (default) values. out transitions animate from an element’s default values to the provided values.

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

Slides an element in and out.

slide
} from 'svelte/transition';

blur

为元素的不透明度以及 blur 过滤器设置动画。

¥Animates a blur filter alongside an element’s opacity.

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

crossfade

crossfade 函数创建一对名为 sendreceivetransitions。当一个元素是 ‘sent’ 时,它会查找对应的 ‘received’ 元素,并生成一个转换,将该元素转换到其对应元素的位置并将其淡出。当元素为 ‘received’ 时,情况相反。如果没有对应项,则使用 fallback 转换。

¥The crossfade function creates a pair of transitions 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.

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
];

draw

为元素的不透明度从 0 到当前不透明度设置动画,以进行 转换,为元素的不透明度从当前不透明度到 0 设置动画,以进行 转换。in 将动画从提供的值转换为元素的当前(默认)值,作为参数传递。out 转换从不可见的路径开始,并随着时间的推移将路径绘制到屏幕上。draw 仅适用于具有 getTotalLength 方法的元素,如 <path><polyline>

¥Animates the stroke of an SVG element, like a snake in a tube. in transitions begin with the path invisible and draw the path to the screen over time. out transitions start in a visible state and gradually erase the path. draw only works with elements that have a getTotalLength method, like <path> and <polyline>.

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

fade

为元素的不透明度和比例设置动画。

¥Animates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions.

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

fly

为 SVG 元素的描边设置动画,就像管子里的蛇一样。in 将动画从提供的值转换为元素的默认值,作为参数传递。out 将动画从元素的默认值转换为提供的值。

¥Animates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element’s default values. out transitions animate from the element’s default values to the provided values.

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

scale

为元素的不透明度和比例设置动画。in 将动画从提供的值转换为元素的当前(默认)值。out 将动画从元素的默认值转换为提供的值。

¥Animates the opacity and scale of an element. in transitions animate from the provided values, passed as parameters, to an element’s current (default) values. out transitions animate from an element’s default values to the provided values.

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

slide

将元素滑入和滑出。

¥Slides an element in and out.

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

BlurParams

interface BlurParams {}
delay?: number;
duration?: number;
easing?: EasingFunction;
amount?: number | string;
opacity?: number;

CrossfadeParams

interface CrossfadeParams {}
delay?: number;
duration?: number | ((len: number) => number);
easing?: EasingFunction;

DrawParams

interface DrawParams {}
delay?: number;
speed?: number;
duration?: number | ((len: number) => number);
easing?: EasingFunction;

EasingFunction

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

FadeParams

interface FadeParams {}
delay?: number;
duration?: number;
easing?: EasingFunction;

FlyParams

interface FlyParams {}
delay?: number;
duration?: number;
easing?: EasingFunction;
x?: number | string;
y?: number | string;
opacity?: number;

ScaleParams

interface ScaleParams {}
delay?: number;
duration?: number;
easing?: EasingFunction;
start?: number;
opacity?: number;

SlideParams

interface SlideParams {}
delay?: number;
duration?: number;
easing?: EasingFunction;
axis?: 'x' | 'y';

TransitionConfig

interface TransitionConfig {}
delay?: number;
duration?: number;
easing?: EasingFunction;
css?: (t: number, u: number) => string;
tick?: (t: number, u: number) => void;