[Svelte] Custom JS transitions

스벨트 트랜지션: CSS vs 자바스크립트

지금까지 스벨트 트랜지션을 사용하여 다양한 애니메이션 효과를 구현하는 방법을 살펴보았습니다. 대부분의 경우 CSS만으로도 훌륭한 효과를 만들 수 있지만, 자바스크립트를 사용해야만 구현할 수 있는 효과도 일부 존재합니다.

대표적인 예시는 타자기 효과입니다.

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

  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 * 0.01);

  return {
    duration,
    tick: (t) => {
      const i = Math.trunc(text.length * t);
      node.textContent = text.slice(0, i);
    }
  };
}

위 코드는 타자기 효과를 만드는 typewriter 트랜지션 함수를 정의합니다. 이 함수는 다음과 같은 과정을 수행합니다.

1. 유효성 검사 : 해당 트랜지션은 텍스트 노드 자식 하나만 포함하는 요소에서만 작동합니다.
2. 텍스트 가져오기 : 텍스트 노드의 실제 문자열을 가져옵니다.
3. 지속 시간 계산 : 타자기 효과의 속도(speed)를 기반으로 애니메이션 지속 시간을 계산합니다.
4. 텍스트 업데이트 : tick 함수는 매 프레임마다 호출되며, 현재 진행률(t)에 따라 표시되는 텍스트 길이를 조정합니다.

따라서 이 트랜지션은 매 프레임마다 텍스트 노드의 내용을 업데이트하여 타자기 효과를 만들어냅니다.

---

출처 : https://learn.svelte.dev/tutorial/custom-js-transitions