Svelte 自定義 CSS 過(guò)渡

svelte/transition 模塊含有一些內(nèi)置的過(guò)渡效果，但是創(chuàng)建自己的過(guò)渡效果也是非常容易，舉例來(lái)說(shuō)，這是 fade過(guò)渡的代碼實(shí)現(xiàn)：

function fade(node, {
	delay = 0,
	duration = 400
}) {
	const o = +getComputedStyle(node).opacity;

	return {
		delay,
		duration,
		css: t => `opacity: ${t * o}`
	};
}

該函數(shù)接收兩個(gè)參數(shù)（過(guò)渡應(yīng)用到節(jié)點(diǎn)以及傳入的任何參數(shù)）并返回一個(gè)過(guò)渡對(duì)象，該對(duì)象可以具有以下屬性：

• delay ： 過(guò)渡開(kāi)始（毫秒）。
• duration： 過(guò)渡時(shí)長(zhǎng)（毫秒）。
• easing ：p => t easing 函數(shù))
• css ：(t, u) => css函數(shù), where u === 1 - t。
• tick — a (t, u) => {...} 對(duì)節(jié)點(diǎn)有一定影響的函數(shù)。

該 t 值為 0時(shí)表示開(kāi)始，值為1 表示結(jié)束，根據(jù)情況含義可以截然相反。

大多數(shù)情況下，您應(yīng)該返回該 css 而不是tick 屬性，因?yàn)?CSS animations 會(huì)運(yùn)行在主線程中，以避免出現(xiàn)混淆。.Svelte '模擬（simulates）' 過(guò)渡效果并創(chuàng)建CSS animation，然后使其運(yùn)行。

例如，fade 過(guò)渡會(huì)生成 CSS animation ，如下所示：

0% { opacity: 0 }
10% { opacity: 0.1 }
20% { opacity: 0.2 }
/* ... */
100% { opacity: 1 }

不過(guò)我們可以發(fā)揮更大的創(chuàng)新，做出真正定制化的東西：

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

	let visible = true;

	function spin(node, { duration }) {
		return {
			duration,
			css: t => {
				const eased = elasticOut(t);

				return `
					transform: scale(${eased}) rotate(${eased * 1080}deg);
					color: hsl(
						${~~(t * 360)},
						${Math.min(100, 1000 - 1000 * t)}%,
						${Math.min(50, 500 - 500 * t)}%
					);`
			}
		};
	}
</script>

記?。耗芰υ酱筘?zé)任越大。

示例代碼

• App.svelte

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

	let visible = true;

	function spin(node, { duration }) {
		return {
			duration,
			css: t => {
				const eased = elasticOut(t);

				return `
					transform: scale(${eased}) rotate(${eased * 1080}deg);
					color: hsl(
						${~~(t * 360)},
						${Math.min(100, 1000 - 1000 * t)}%,
						${Math.min(50, 500 - 500 * t)}%
					);`
			}
		};
	}
</script>

<style>
	.centered {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}

	span {
		position: absolute;
		transform: translate(-50%,-50%);
		font-size: 4em;
	}
</style>

<label>
	<input type="checkbox" bind:checked={visible}>
	visible
</label>

{#if visible}
	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
		<span>transitions!</span>
	</div>
{/if}