Svelte模板语法

transition:

状态变化导致元素进入或离开 DOM，从而触发转换。

¥A transition is triggered by an element entering or leaving the DOM as a result of a state change.

当一个块（例如 {#if ...} 块）正在过渡时，其中的所有元素（包括那些没有自己的过渡的元素）都会保留在 DOM 中，直到块中的每个过渡都完成。

¥When a block (such as an {#if ...} block) is transitioning out, all elements inside it, including those that do not have their own transitions, are kept in the DOM until every transition in the block has been completed.

transition: 指令表示双向转换，这意味着可以在转换过程中顺利地逆转转换。

¥The transition: directive indicates a bidirectional transition, which means it can be smoothly reversed while the transition is in progress.

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

	let visible = $state(false);
</script>

<button onclick={() => visible = !visible}>toggle</button>

{#if visible}
	<div transition:fade>fades in and out</div>
{/if}

内置转换(Built-in transitions)

¥Built-in transitions

可以从 svelte/transition 模块导入一系列内置转换。

¥A selection of built-in transitions can be imported from the svelte/transition module.

本地与全局(Local vs global)

¥Local vs global

默认情况下，过渡是本地的。局部转场仅在创建或销毁它们所属的块时播放，而不是在创建或销毁父块时播放。

¥Transitions are local by default. Local transitions only play when the block they belong to is created or destroyed, not when parent blocks are created or destroyed.

{#if x}
	{#if y}
		<p transition:fade>fades in and out only when y changes</p>

		<p transition:fade|global>fades in and out when x or y change</p>
	{/if}
{/if}

转场参数(Transition parameters)

¥Transition parameters

转换可以有参数。

¥Transitions can have parameters.

（双 {{curlies}} 不是特殊语法；这是表达式标记内的对象字面量。）

¥(The double {{curlies}} aren’t a special syntax; this is an object literal inside an expression tag.)

{#if visible}
	<div transition:fade={{ duration: 2000 }}>fades in and out over two seconds</div>
{/if}

自定义转场函数(Custom transition functions)

¥Custom transition functions

transition = (node: HTMLElementnode: HTMLElement, params: anyparams: any, options: {
    direction: "in" | "out" | "both";
}options: { direction: "in" | "out" | "both"direction: 'in' | 'out' | 'both' }) => {
	delay?: number,
	duration?: number,
	easing?: (t: numbert: number) => number,
	css?: (t: numbert: number, u: numberu: number) => string,
	tick?: (t: numbert: number, u: numberu: number) => void
}

转换可以使用自定义函数。如果返回的对象具有 css 函数，Svelte 将为网页动画生成关键帧。

¥Transitions can use custom functions. If the returned object has a css function, Svelte will generate keyframes for a web animation.

在应用 easing 函数后，传递给 css 的 t 参数是介于 0 和 1 之间的值。在从 0 到 1 的转换中，我们的转换从 1 到 0 — 换句话说，1 是元素的自然状态，就好像没有应用任何转换一样。u 参数等于 1 - t。

¥The t argument passed to css is a value between 0 and 1 after the easing function has been applied. In transitions run from 0 to 1, out transitions run from 1 to 0 — in other words, 1 is the element’s natural state, as though no transition had been applied. The u argument is equal to 1 - t.

在过渡开始之前，使用不同的 t 和 u 参数反复调用该函数。

¥The function is called repeatedly before the transition begins, with different t and u arguments.

App

<script>
	import { elasticOut } from 'svelte/easing';

	/** @type {boolean} */
	export let visible;

	/**

	 * @param {HTMLElement} node

	 * @param {{ delay?: number, duration?: number, easing?: (t: number) => number }} params
	 */
	function whoosh(node, params) {
		const existingTransform = getComputedStyle(node).transform.replace('none', '');

		return {
			delay: params.delay || 0,
			duration: params.duration || 400,
			easing: params.easing || elasticOut,
			css: (t, u) => `transform: ${existingTransform} scale(${t})`
		};
	}
</script>

{#if visible}
	<div in:whoosh>whooshes in</div>
{/if}

<script lang="ts">
	import { elasticOut } from 'svelte/easing';
	export let visible: boolean;
	function whoosh(node: HTMLElement, params: { delay?: number, duration?: number, easing?: (t: number) => number }) {
		const existingTransform = getComputedStyle(node).transform.replace('none', '');

		return {
			delay: params.delay || 0,
			duration: params.duration || 400,
			easing: params.easing || elasticOut,
			css: (t, u) => `transform: ${existingTransform} scale(${t})`
		};
	}
</script>

{#if visible}
	<div in:whoosh>whooshes in</div>
{/if}

自定义转换函数还可以返回 tick 函数，该函数在转换期间使用相同的 t 和 u 参数调用。

¥A custom transition function can also return a tick function, which is called during the transition with the same t and u arguments.

如果可以使用 css 代替 tick，请这样做 — Web 动画可以在主线程中运行，从而防止在较慢的设备上出现卡顿。

¥[!NOTE] If it’s possible to use css instead of tick, do so — web animations can run off the main thread, preventing jank on slower devices.

App

<script>
	export let visible = false;

	/**

	 * @param {HTMLElement} node

	 * @param {{ speed?: number }} params
	 */
	function typewriter(node, { speed = 1 }) {
		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;

		if (!valid) {
			throw new Error(`This transition only works on elements with a single text node child`);
		}

		const text = node.textContent;
		const duration = text.length / (speed * 0.01);

		return {
			duration,
			tick: (t) => {
				const i = ~~(text.length * t);
				node.textContent = text.slice(0, i);
			}
		};
	}
</script>

{#if visible}
	<p in:typewriter={{ speed: 1 }}>The quick brown fox jumps over the lazy dog</p>
{/if}

<script lang="ts">
	export let visible = false;
	function typewriter(node: HTMLElement, { speed = 1 }: { speed?: number }) {
		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;

		if (!valid) {
			throw new Error(`This transition only works on elements with a single text node child`);
		}

		const text = node.textContent;
		const duration = text.length / (speed * 0.01);

		return {
			duration,
			tick: (t) => {
				const i = ~~(text.length * t);
				node.textContent = text.slice(0, i);
			}
		};
	}
</script>

{#if visible}
	<p in:typewriter={{ speed: 1 }}>The quick brown fox jumps over the lazy dog</p>
{/if}

如果转换返回一个函数而不是转换对象，则该函数将在下一个微任务中调用。这允许多个转换进行协调，从而实现交叉淡入淡出效果。

¥If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making crossfade effects possible.

过渡函数还接收第三个参数 options，其中包含有关过渡的信息。

¥Transition functions also receive a third argument, options, which contains information about the transition.

options 对象中的可用值为：

¥Available values in the options object are:

direction - 根据转换类型，in、out 或 both 之一

¥direction - one of in, out, or both depending on the type of transition

转场事件(Transition events)

¥Transition events

除了任何标准 DOM 事件之外，具有转换的元素还将调度以下事件：

¥An element with transitions will dispatch the following events in addition to any standard DOM events:

introstart
introend
outrostart
outroend

{#if visible}
	<p
		transition:fly={{ y: 200, duration: 2000 }}
		onintrostart={() => (status = 'intro started')}
		onoutrostart={() => (status = 'outro started')}
		onintroend={() => (status = 'intro ended')}
		onoutroend={() => (status = 'outro ended')}
	>
		Flies in and out
	</p>
{/if}

use: in:and out: