メインコンテンツにスキップ

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は、<path><polyline>のように、getTotalLengthメソッドを持つ要素でのみ機能します。

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でこのページを編集する