运行时

svelte/transition

svelte/transition 模块导出了七个函数：fade、blur、fly、slide、scale、draw 和 crossfade。它们用于 Svelte transitions。

fade永久链接

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

transition:fade={params}

in:fade={params}

out:fade={params}

为 in 过渡设置元素的不透明度从 0 到当前不透明度，为 out 过渡设置元素的不透明度从当前不透明度到 0。

fade 接受以下参数

delay（number，默认值为 0）——开始前经过的毫秒数
duration（number，默认值为 400）——过渡持续的毫秒数
easing（function，默认值为 linear）——缓动函数

您可以在过渡教程中看到 fade 过渡的实际效果。

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

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

模糊永久链接

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

transition:blur={params}

in:blur={params}

out:blur={params}

沿元素的不透明度设置模糊滤镜动画。

模糊接受以下参数

delay（number，默认值为 0）——开始前经过的毫秒数
duration（number，默认值为 400）——过渡持续的毫秒数
缓动（函数，默认cubicInOut）——缓动函数
不透明度（数字，默认 0）——动画淡出和淡入的不透明度值
大小（数字 | 字符串，默认 5）——模糊的大小。支持 CSS 单位（例如："4rem"）。默认单位为px

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

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

飞入永久链接

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 位置以及不透明度的动画。in 过渡从作为参数传递给元素的默认值开始动画。out 过渡从元素的默认值到提供的值开始动画。

飞入接受以下参数

delay（number，默认值为 0）——开始前经过的毫秒数
duration（number，默认值为 400）——过渡持续的毫秒数
缓动（函数，默认cubicOut）——缓动函数
x（数字 | 字符串，默认 0）——动画淡出和淡入的 x 偏移量
y（数字 | 字符串，默认 0）——动画淡出和淡入的 y 偏移量
不透明度（数字，默认 0）——动画淡出和淡入的不透明度值

x 和 y 默认使用px，但支持 CSS 单位，例如 x: '100vw' 或 y: '50%'。您可以在过渡教程中看到飞入过渡的实际效果。

<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}

滑动永久链接

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

transition:slide={params}

in:slide={params}

out:slide={params}

滑动元素淡入和淡出。

滑动接受以下参数

delay（number，默认值为 0）——开始前经过的毫秒数
duration（number，默认值为 400）——过渡持续的毫秒数
缓动（函数，默认cubicOut）——缓动函数

轴（x | y，默认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}

缩放永久链接

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

transition:scale={params}

in:scale={params}

out:scale={params}

设置元素的不透明度和缩放的动画。in 过渡从元素当前（默认）值到作为参数传递的提供的值开始动画。out 过渡从提供的值到元素的默认值开始动画。

缩放接受以下参数

delay（number，默认值为 0）——开始前经过的毫秒数
duration（number，默认值为 400）——过渡持续的毫秒数
缓动（函数，默认cubicOut）——缓动函数
开始（数字，默认 0）——动画淡出和淡入的缩放值
不透明度（数字，默认 0）——动画淡出和淡入的不透明度值

<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}

绘制永久链接

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 过渡从可见状态开始，并逐渐擦除路径。绘制仅适用于具有getTotalLength方法的元素，如<path>和<polyline>。

绘制接受以下参数

delay（number，默认值为 0）——开始前经过的毫秒数
速度（数字，默认未定义）——动画速度，见下文。
duration（number | function，默认 800）——过渡持续的毫秒数
缓动（函数，默认cubicInOut）——缓动函数

speed 参数是一种相对于路径长度设置过渡持续时间的方法。它是一个应用于路径长度的修饰符：duration = length / speed。一条长度为 1000 像素，速度为 1 的路径将持续 1000ms，将速度设置为 0.5 将使持续时间加倍，而将速度设置为 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，默认值为 0）——开始前经过的毫秒数
duration（number | function，默认 800）——过渡持续的毫秒数
缓动（函数，默认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}

类型permalink

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;

上一个 svelte/motion

下一步 svelte/animate