회사의 조회에서 추첨 도구를 사용하여 매일 아침 추첨하다
그 도구는 입력 항목을 저장하지 않기 때문이다
입력 항목을 LocalStorage에 저장하는 추첨 도구를 만들어 보았습니다

만들어진 물건

사용된 기술

Sveltekit

tailwindcss

Vercel

제비뽑기 애니메이션 정보

Svelte에서 구성 요소에 transsition 애니메이션을 간단하게 적용할 수 있습니다.
예를 들어 리스트에 지정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에서 지정한 함수는 다음과 같다nodeoption의 두 개를 매개 변수로 한다

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 같은 것도 던져주면 좋겠네요