跳到主要內容

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 濾鏡以及不透明度。

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

crossfade

crossfade 函式建立一對稱為 sendreceive轉場。當一個元素被「送出」時,它會尋找一個對應的被「接收」的元素,並產生一個轉場,將元素轉換到其對應元素的位置並使其淡出。當一個元素被「接收」時,則會發生相反的情況。如果沒有對應的元素,則會使用 fallback 轉場。

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

動畫處理 SVG 元素的筆觸,就像管子裡的蛇一樣。in 轉場開始時路徑不可見,並隨著時間推移將路徑繪製到螢幕上。out 轉場則從可見狀態開始,並逐漸擦除路徑。draw 僅適用於具有 getTotalLength 方法的元素,例如 <path><polyline>

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

fade

動畫處理元素的不透明度,in 轉場從 0 到目前不透明度,而 out 轉場則從目前不透明度到 0。

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

fly

動畫處理元素的 x 和 y 位置以及不透明度。in 轉場從提供的數值開始動畫,這些數值會作為參數傳遞到元素的預設值。out 轉場則從元素的預設值動畫到提供的數值。

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

scale

動畫處理元素的不透明度和縮放。in 轉場從提供的數值開始動畫,這些數值會作為參數傳遞到元素的目前(預設)值。out 轉場則從元素的預設值動畫到提供的數值。

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

slide

滑動元素進入和退出。

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;

在 GitHub 上編輯此頁面

上一頁 下一頁