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來將過場動畫告一段落，明天要寫下鐵人比賽第三十天的文章，敬請期待。