職場の朝会でファシリテーターをくじびきツール使って毎朝抽選しているのですが、
そのツールが入力項目を記憶してくれないので、
入力項目をLocalStorageに保存しておくようなくじびきツールを作ってみました

つくったもの

使用した技術

Sveltekit
tailwindcss
Vercel

くじびきのアニメーションについて

Svelteではtransitionアニメーションを簡単にコンポーネントに適用することができます。

例えばリストで transtion:slide を指定するだけで、リストの追加/削除時にいい感じにぬるっと動いてくれるようになります

  {#each items as item}
    <div transition:slide class="flex justify-center items-center ">
    ...
    </div>
  {/each}

Transitionは用意されているものだけでなく、以下のようにオリジナルのものを設定することもできます

参考: https://svelte.dev/docs#transition_fn

  function lotteryAnimation(node, option) {
    let items = $lotteryItemStore.filter((item) => item.enabled && item.text);

    items = shuffle(items);

    return {
      duration: 2000,
      easing: cubicOut,
      tick: (t) => {
        const i = ~~(t * 100) % items.length;
        node.textContent = items[i].text;
      }
    };
  }

　　　// usage
 // <div transition:lotteryAnimation>

　
transtion:hoge に指定する関数は以下のように node option　　の二つを引数にとります

transition = (node: HTMLElement, params: any) => {
    delay?: number,
    duration?: number,
    easing?: (t: number) => number,
    css?: (t: number, u: number) => string,
    tick?: (t: number, u: number) => void
}

tick関数は 0 - 1 の値 t を引数にとります
このtはeasingに指定された関数によって生成されます

これによって最初は細かく切り替わり、終盤はゆっくり切り替わるような動作を再現することができました🎉

まとめ

もし何かくじ引きなどすることがあれば使っていただけると幸いです。
何かありましたらPRなども投げてもらえると嬉しいです

Sveltekitで抽選ツールを作ってみた

つくったもの

使用した技術

くじびきのアニメーションについて

まとめ