svelte/transition

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

英The svelte/transition module exports seven functions: fade, blur, fly, slide, scale, draw and crossfade. They are for use with Svelte transitions.

fadepermalink

导出片段： svelte/transition#fade

transition:fade={params}

in:fade={params}

out:fade={params}

对于 in 转场，将元素的不透明度从 0 动画到当前不透明度；对于 out 转场，将元素的不透明度从当前不透明度动画到 0。

英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 接受以下参数：

英fade accepts the following parameters:

• delay （number，默认 0） — 开始前的毫秒数
• duration （number，默认 400） — 转换持续的毫秒数
• easing （function，默认 linear） — 一个 缓动函数

你可以在 转场教程 中看到 fade 转换的实际效果。

英You can see the fade transition in action in the transition tutorial.

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

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

blurpermalink

导出片段： svelte/transition#blur

transition:blur={params}

in:blur={params}

out:blur={params}

使 blur 滤镜与元素的不透明度一起动画化。

英Animates a blur filter alongside an element's opacity.

blur 接受以下参数：

英blur accepts the following parameters:

• delay （number，默认 0） — 开始前的毫秒数
• duration （number，默认 400） — 转换持续的毫秒数
• easing （function，默认 cubicInOut） — 一个 缓动函数
• opacity（number，默认 0）- 动画出入的不透明度值
• amount（number | string，默认 5）- 模糊的大小。 支持 css 单位（例如："4rem"）。 默认单位为 px

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

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

flypermalink

导出片段： svelte/transition#fly

transition:fly={params}

in:fly={params}

out:fly={params}

对元素的 x 和 y 位置以及不透明度进行动画处理。 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.

fly 接受以下参数：

英fly accepts the following parameters:

• delay （number，默认 0） — 开始前的毫秒数
• duration （number，默认 400） — 转换持续的毫秒数
• easing （function，默认 cubicOut） — 一个 缓动函数
• x（number | string，默认 0）- 动画出入的 x 偏移量
• y（number | string，默认 0）- 动画出入的 y 偏移量
• opacity（number，默认 0）- 动画出入的不透明度值

x 和 y 默认使用 px，但支持 css 单位，例如 x: '100vw' 或 y: '50%'。 你可以在 转场教程 中看到 fly 转换的实际效果。

英x and y use px by default but support css units, for example x: '100vw' or y: '50%'. You can see the fly transition in action in the transition tutorial.

<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

导出片段： svelte/transition#slide

transition:slide={params}

in:slide={params}

out:slide={params}

将元素滑入和滑出。

英Slides an element in and out.

slide 接受以下参数：

英slide accepts the following parameters:

• delay （number，默认 0） — 开始前的毫秒数
• duration （number，默认 400） — 转换持续的毫秒数
• easing （function，默认 cubicOut） — 一个 缓动函数

• axis（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}

scalepermalink

导出片段： svelte/transition#scale

transition:scale={params}

in:scale={params}

out:scale={params}

对元素的不透明度和比例进行动画处理。 in 将动画从元素的当前（默认）值转换为作为参数传递的提供的值。 out 将动画从提供的值转换为元素的默认值。

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

scale 接受以下参数：

英scale accepts the following parameters:

• delay （number，默认 0） — 开始前的毫秒数
• duration （number，默认 400） — 转换持续的毫秒数
• easing （function，默认 cubicOut） — 一个 缓动函数
• start（number，默认 0）- 动画输出和输入的比例值
• opacity（number，默认 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}

drawpermalink

导出片段： svelte/transition#draw

transition:draw={params}

in:draw={params}

out:draw={params}

对 SVG 元素的笔划进行动画处理，就像管中的蛇一样。 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>.

draw 接受以下参数：

英draw accepts the following parameters:

• delay （number，默认 0） — 开始前的毫秒数
• speed（number，默认未定义）- 动画的速度，见下文。
• duration（number） | function，默认 800) — 转换持续的毫秒数
• easing （function，默认 cubicInOut） — 一个 缓动函数

speed 参数是设置相对于路径长度的转场持续时间的方法。 它是应用于路径长度的修饰符： duration = length / speed。 速度为 1、长度为 1000 像素的路径的持续时间为 1000ms，将速度设置为 0.5 将使持续时间加倍，将速度设置为 2 将使持续时间减半。

英The speed parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: duration = length / speed. A path that is 1000 pixels with a speed of 1 will have a duration of 1000ms, setting the speed to 0.5 will double that duration and setting it to 2 will halve it.

<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

导出片段： svelte/transition#crossfade

crossfade 函数创建一对 transitions，称为 send 和 receive。 当一个元素是 '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.

crossfade 接受以下参数：

英crossfade accepts the following parameters:

• delay （number，默认 0） — 开始前的毫秒数
• duration（number） | function，默认 800) — 转换持续的毫秒数
• easing （function，默认 cubicOut） — 一个 缓动函数
• fallback (function) — 当没有接收到匹配元素时用于发送，以及当没有发送元素时用于接收的后备 transition。

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

类型(Types)permalink

类型： svelte/transition