[Svelte] Custom CSS transitions

Svelte 트랜지션 만들기 : 무한한 가능성

Svelte는 svelte/transition 모듈을 통해 다양한 트랜지션 효과를 제공하지만 사용자 정의 트랜지션을 만들어 완전히 새로운 애니메이션 효과를 구현할 수도 있습니다.

예를 들어, 기본 제공되는 fade 트랜지션의 소스 코드는 다음과 같습니다.

function fade(node, { delay = 0, duration = 400 }) {
  const o = +getComputedStyle(node).opacity;

  return {
    delay,
    duration,
    css: (t) => `opacity: ${t * o}`
  };
}

위 코드에서 fade 함수는 두 개의 인수를 받습니다.

• 첫 번째 인수는 트랜지션을 적용할 노드입니다.
• 두 번째 인수는 트랜지션에 대한 설정 객체입니다. (선택적이며, 기본값이 제공됩니다.)

함수는 트랜지션 객체를 반환합니다. 트랜지션 객체는 다음과 같은 속성을 가질 수 있습니다.

• delay : 트랜지션이 시작되기 전의 지연 시간 (밀리초 단위)
• duration : 트랜지션 지속 시간 (밀리초 단위)
• easing : 이징 함수 (p => t 함수, 트윈팅 장에서 자세히 다룸)
• css : (t, u) => css 함수입니다. 여기서 u === 1 - t입니다.
• tick : (t, u) => {...} 함수입니다. 노드에 어떤 효과를 적용합니다.

t 값은 애니메이션 시작 시 0이고, 끝날 때 1이 됩니다.

대부분의 경우 css 속성만 사용하고 tick 속성은 사용하지 않습니다. CSS 애니메이션은 가능한 대로 끊김 현상(jank)을 방지하기 위해 메인 스레드 외부에서 실행되기 때문입니다. Svelte는 트랜지션을 시뮬레이션하고 CSS 애니메이션을 생성한 다음 실행합니다.

예를 들어 fade 트랜지션은 다음과 같은 CSS 애니메이션을 생성합니다.

0% { opacity: 0 }
10% { opacity: 0.1 }
20% { opacity: 0.2 }
/* ... */
100% { opacity: 1 }

하지만 사용자 정의 트랜지션을 통해 훨씬 더 독창적인 효과를 만들 수 있습니다. 멋진 예시를 한 번 만들어 보겠습니다.

<script>
  import { fade } from 'svelte/transition';
  import { elasticOut } from 'svelte/easing';

  let visible = true;

  function spin(node, { duration }) {
    return {
      duration,
      css: t => {
        const eased = elasticOut(t);

        return `
          transform: scale(${eased}) rotate(${eased * 1080}deg);
          color: hsl(
            ${Math.trunc(t * 360)},
            ${Math.min(100, 1000 * (1 - t))}%,
            ${Math.min(50, 500 * (1 - t))}%
          );`
      }
    };
  }
</script>

위 코드는 회전하면서 색상이 변화하는 트랜지션 효과를 만듭니다.

물론, 힘이 클수록 책임 또한 커집니다. 사용자 정의 트랜지션을 만들 때는 성능과 가독성을 고려해야 합니다.

---

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