Runtime

svelte/transition

svelte/transition モジュールは fade、blur、fly、 slide、scale、draw、crossfade の7つの関数をエクスポートします。これらは Svelte transitions で使用します。

fadepermalink

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

transition:fade={params}

in:fade={params}

out:fade={params}

要素の opacity を、in トランジションでは 0 から現在の opacity まで、out トランジションでは現在の opacity から 0 までアニメーションします。

fade は以下のパラメータを受け付けます。

delay (number, default 0) — 開始前の待ち時間のミリ秒
duration (number, default 400) — トランジションの持続時間のミリ秒
easing (function, default linear) — イージング関数

transition チュートリアルで fade トランジションの動作を見ることができまで fade トランジションの動作を見ることができます。

<script>
	import { fade } from 'svelte/transition';
</script>

{#if condition}
	<div transition:fade={{ delay: 250, duration: 300 }}>fades in and out</div>
{/if}

blurpermalink

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

transition:blur={params}

in:blur={params}

out:blur={params}

要素の opacity に合わせて blur フィルタをアニメーション化します。

blur は以下のパラメータを受け付けます。

delay (number, default 0) —開始前の待ち時間のミリ秒
duration (number, default 400) — アニメーションの持続時間のミリ秒
easing (function, default cubicInOut) — イージング関数
opacity (number, default 0) - アニメーションする opacity の値 (out の場合はこの値に、in の場合はこの値から)
amount (number | string, default 5) - ぼかし(blur)のサイズ。css の単位 (例: "4rem") をサポートしています。デフォルトの単位は px です

<script>
	import { blur } from 'svelte/transition';
</script>

{#if condition}
	<div transition:blur={{ amount: 10 }}>fades in and out</div>
{/if}

flypermalink

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

transition:fly={params}

in:fly={params}

out:fly={params}

要素の x と y の位置と opacity をアニメーション化します。in トランジションは、パラメータとして指定された値から要素のデフォルトの値にアニメーションします。out トランジションは、要素のデフォルトの値から指定された値にアニメーションします。

fly は以下のパラメータを受け付けます。

delay (number, default 0) — 開始前の待ち時間のミリ秒
duration (number, default 400) — トランジションの持続時間のミリ秒
easing (function, default cubicOut) — イージング関数
x (number | string, default 0) - アニメーションで移動する x 位置のオフセット (out の場合はこの値に、in の場合はこの値から)
y (number | string, default 0) - アニメーションで移動する y 位置のオフセット (out の場合はこの値に、in の場合はこの値から)
opacity (number, default 0) - アニメーションする opacity の値 (out の場合はこの値に、in の場合はこの値から)

x と y はデフォルトで px を使用しますが、css の単位もサポートしています。例えば x: '100vw' や y: '50%' にすることができます。 fly トランジションの動作はトランジションチュートリアルで見ることができます。

<script>
	import { fly } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

{#if condition}
	<div
		transition:fly={{ delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut }}
	>
		flies in and out
	</div>
{/if}

slidepermalink

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

transition:slide={params}

in:slide={params}

out:slide={params}

要素をスライドさせて出し入れします。

slide は下記のパラメータを受け付けます。

delay (number, default 0) — 開始前の待ち時間のミリ秒
duration (number, default 400) — トランジションの持続時間のミリ秒
easing (function, default cubicOut) — イージング関数

axis (x | y, default y) — トランジションが発生するモーションの軸

<script>
	import { slide } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

{#if condition}
	<div transition:slide={{ delay: 250, duration: 300, easing: quintOut, axis: 'x' }}>
		slides in and out horizontally
	</div>
{/if}

scalepermalink

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

transition:scale={params}

in:scale={params}

out:scale={params}

要素の opacity と scale をアニメーション化します。in トランジションは、要素の現在の(デフォルトの)値からパラメータとして渡された値にアニメーションします。out トランジションは、指定された値から要素のデフォルト値にアニメーションします。

scale は以下のパラメータを受け付けます。

delay (number, default 0) — 開始前の待ち時間のミリ秒
duration (number, default 400) — トランジションの持続時間のミリ秒
easing (function, default cubicOut) — イージング関数
start (number, default 0) - アニメーションする scale の値 (out の場合はこの値に、in の場合はこの値から)
opacity (number, default 0) - アニメーションする opacity の値 (out の場合はこの値に、in の場合はこの値から)

<script>
	import { scale } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

{#if condition}
	<div transition:scale={{ duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut }}>
		scales in and out
	</div>
{/if}

drawpermalink

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

transition:draw={params}

in:draw={params}

out:draw={params}

SVG 要素のストロークを蛇が管の中を進むようにアニメーション化します。in トランジションはパスが見えない状態から始まり、時間の経過とともにパスが画面に描画されます。out トランジションはパスが見える状態から始まり、徐々にパスを消していきます。draw は <path> や <polyline> のように getTotalLength メソッドを持つ要素でのみ動作します。

draw は以下のパラメータを受け付けます。

delay (number, default 0) — 開始前の待ち時間のミリ秒
speed (number, default undefined) - アニメーションの速度、下記を参照してください
duration (number | function, default 800) — トランジションの持続時間のミリ秒
easing (function, default cubicInOut) — イージング関数

速度パラメータ speed はパスの長さに対する遷移の持続時間を設定する手段です。これはパスの長さに適用される修飾子で duration = length / speed となります。1000ピクセルで速度が1のパスの持続時間は 1000ms であり、速度を 0.5 に設定すると持続時間は2倍になり、2 に設定すると半分になります。

<script>
	import { draw } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
</script>

<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
	{#if condition}
		<path
			transition:draw={{ duration: 5000, delay: 500, easing: quintOut }}
			d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
			fill="none"
			stroke="cornflowerblue"
			stroke-width="0.1px"
			stroke-linejoin="round"
		/>
	{/if}
</svg>

crossfadepermalink

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

crossfade 関数は send と receive というトランジションのペアを作成します。ある要素が「送信」されると、それに対応する「受信」される要素を探し、その要素を相手の位置に変換してフェードアウトさせるトランジションを生成します。要素が「受信」されると、その逆が起こります。対応する要素がない場合は、fallback トランジションが使用されます。

crossfade は下のパラメータを受け付けます:

delay (number, default 0) — 開始するまでのミリ秒
duration (number | function, default 800) — トランジションが継続するミリ秒
easing (function, default cubicOut) — イージング関数
fallback (function) — 受信している要素に一致するものがない場合の送信時や、送信している要素がない場合の受信時に使用するフォールバックトランジションです。

<script>
	import { crossfade } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';

	const [send, receive] = crossfade({
		duration: 1500,
		easing: quintOut
	});
</script>

{#if condition}
	<h1 in:send={{ key }} out:receive={{ key }}>BIG ELEM</h1>
{:else}
	<small in:send={{ key }} out:receive={{ key }}>small elem</small>
{/if}

Typespermalink

BlurParamspermalink

ts
interface BlurParams {…}

ts
delay?: number;

ts
duration?: number;

ts
easing?: EasingFunction;

ts
amount?: number | string;

ts
opacity?: number;

CrossfadeParamspermalink

ts
interface CrossfadeParams {…}

ts
delay?: number;

ts
duration?: number | ((len: number) => number);

ts
easing?: EasingFunction;

DrawParamspermalink

ts
interface DrawParams {…}

ts
delay?: number;

ts
speed?: number;

ts
duration?: number | ((len: number) => number);

ts
easing?: EasingFunction;

EasingFunctionpermalink

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

FadeParamspermalink

ts
interface FadeParams {…}

ts
delay?: number;

ts
duration?: number;

ts
easing?: EasingFunction;

FlyParamspermalink

ts
interface FlyParams {…}

ts
delay?: number;

ts
duration?: number;

ts
easing?: EasingFunction;

ts
x?: number | string;

ts
y?: number | string;

ts
opacity?: number;

ScaleParamspermalink

ts
interface ScaleParams {…}

ts
delay?: number;

ts
duration?: number;

ts
easing?: EasingFunction;

ts
start?: number;

ts
opacity?: number;

SlideParamspermalink

ts
interface SlideParams {…}

ts
delay?: number;

ts
duration?: number;

ts
easing?: EasingFunction;

ts
axis?: 'x' | 'y';

TransitionConfigpermalink

ts
interface TransitionConfig {…}

ts
delay?: number;

ts
duration?: number;

ts
easing?: EasingFunction;

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

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

previous svelte/motion

next svelte/animate