iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
0

custom js

custom js 是繼 custom css 過場動畫後要分享的文章,之前分享的文章都是用內建函式庫來處理過場動畫,昨天的[custom css] 是客製化 css 來完成過場動畫,既然 css 都可以客製化了,那今天來分享客製化js。

本文同步放置於此

custom js 是什麼

顧名思義客製化js是自定義想要的javascript方法,在過場動畫中則是透過改變javascript來呈現過場動畫,當然這麼描述很抽象,接下來看看實作的例子。

custom js 能做什麼

下面用一個打字效果的過場動畫,也許客製化css可以完成這個效果,但是客製化js更容易完成,請大家看一下下面的例子。

<script>
	let visible = false;

	function typewriter(node, { speed = 50 }) {
	const valid = (
		node.childNodes.length === 1 &&
		node.childNodes[0].nodeType === 3
	);

	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;

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

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

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

上面的範例主要是藉由tick這個每段時間的callback來不斷使用javascript,來更新文字長度藉此完成透過客製化js的過場動畫。

小結

今天藉由客製化js來將過場動畫告一段落,明天要寫下鐵人比賽第三十天的文章,敬請期待。


上一篇
DAY28- 過場動畫 (五)
下一篇
DAY30-路由
系列文
前端工程的另一個選擇 Svelte 30

尚未有邦友留言

立即登入留言