Svelte의 Transitions로 간단하게 애니메이션을 추가하는 방법! ✨

이번에는 Svelte에서 제공하는 Transitions 기능에 대해 알아볼게요! 이 기능을 사용하면 컴포넌트나 요소가 화면에 나타나거나 사라질 때 애니메이션 효과를 정말 간단하게 추가할 수 있어요. in, out, 그리고 transition과 같은 키워드들을 이용해서 다양한 방식으로 화면 전환을 구현할 수 있답니다. ㅎㅎ

1. Transitions란 무엇인가요?

Svelte의 Transitions는 요소가 화면에 나타날 때, 사라질 때, 혹은 상태가 변경될 때 애니메이션을 적용할 수 있는 기능입니다. 요소가 변화할 때 자연스럽고 시각적인 피드백을 줄 수 있기 때문에 사용자 경험을 향상시키는 데에 많이 활용돼요.

2. Transition의 종류

Svelte에서 사용할 수 있는 Transition의 종류는 크게 두 가지예요:

• in: 요소가 화면에 나타날 때 애니메이션을 적용합니다.
• out: 요소가 화면에서 사라질 때 애니메이션을 적용합니다.

이 두 가지를 활용하면 요소가 추가되거나 제거될 때 부드러운 애니메이션을 넣을 수 있어요. 예를 들어, 버튼을 클릭할 때 새로운 요소가 나타나거나 사라지는 애니메이션을 쉽게 구현할 수 있죠.

3. 기본적인 Transition 사용 방법

3-1. fade 사용 예시

Svelte는 기본적으로 fade, slide, scale 등의 트랜지션을 제공합니다. 먼저, 가장 기본적인 fade 효과를 살펴볼게요.

<script>
    import { fade } from 'svelte/transition';
    let visible = false;
</script>

<button on:click={() => visible = !visible}>
    Toggle Element
</button>

{#if visible}
    <div transition:fade>
        이 요소는 서서히 나타나고 사라집니다.
    </div>
{/if}

 

• 여기서 transition:fade는 요소가 나타날 때와 사라질 때 서서히 변하는 애니메이션을 적용합니다.
• 버튼을 클릭하면 visible 값이 변경되고, 이에 따라 요소가 나타나거나 사라지게 되는데, 이때 fade 효과가 적용되죠.

3-2. slide 사용 예시

다음으로, slide 효과를 적용해볼게요. 이 효과는 요소가 화면에 슬라이드하면서 나타나고 사라지도록 만듭니다.

<script>
    import { slide } from 'svelte/transition';
    let isOpen = false;
</script>

<button on:click={() => isOpen = !isOpen}>
    슬라이드 토글
</button>

{#if isOpen}
    <div transition:slide>
        이 요소는 슬라이드로 나타납니다!
    </div>
{/if}

 

버튼을 클릭하면 요소가 화면에 슬라이드하면서 등장하거나 사라지게 됩니다. 슬라이드 애니메이션은 특히 메뉴나 사이드바를 구현할 때 유용하게 사용할 수 있어요.

4. 이벤트 캐치와 활용하기

Svelte의 Transitions는 단순히 애니메이션을 적용하는 것만으로 끝나지 않아요. Transition의 상태를 추적하는 이벤트를 사용할 수 있어서, 요소가 등장하거나 사라질 때 추가적인 동작을 할 수 있습니다.

4-1. in, out 이벤트 핸들링

in, out 애니메이션이 완료되었을 때 특정 작업을 수행하도록 할 수도 있어요. 다음 예시를 볼까요?

<script>
    import { fly } from 'svelte/transition';
    let show = false;

    function handleIn() {
        console.log("요소가 화면에 나타났습니다!");
    }

    function handleOut() {
        console.log("요소가 화면에서 사라졌습니다!");
    }
</script>

<button on:click={() => show = !show}>Show / Hide</button>

{#if show}
    <div transition:fly on:introend={handleIn} on:outroend={handleOut}>
        플라이 애니메이션으로 나타나는 요소입니다.
    </div>
{/if}

• on:introend: 요소가 in(화면에 등장) 애니메이션이 끝났을 때 호출됩니다.
• on:outroend: 요소가 out(화면에서 사라짐) 애니메이션이 끝났을 때 호출됩니다.

이런 방식으로 Transition이 끝났을 때의 이벤트를 캐치해서 특정 작업을 처리할 수 있어요. 예를 들어, 요소가 완전히 화면에서 사라진 후에 데이터를 정리하거나, 애니메이션이 끝난 후 다른 동작을 실행할 수 있죠.

5. Transition의 다양한 기능들

Svelte는 기본적으로 몇 가지 유용한 트랜지션 효과를 제공하지만, 직접 커스터마이즈할 수도 있어요. 예를 들어, Transition의 시간이나 딜레이, 그리고 변화 곡선을 설정할 수 있습니다.

5-1. 커스텀 Transition 설정

<script>
    import { scale } from 'svelte/transition';
    let show = true;
</script>

<button on:click={() => show = !show}>Scale Toggle</button>

{#if show}
    <div transition:scale={{ duration: 800, easing: cubicInOut }}>
        이 요소는 커스텀 스케일 애니메이션을 사용합니다.
    </div>
{/if}

 

• duration: 애니메이션의 지속 시간을 설정합니다.
• easing: 애니메이션의 속도 변화를 설정하는 함수입니다. 기본적인 ease, cubicInOut 등을 사용할 수 있어요.

6. 헷갈리지 마세요! ⭐

• transition:fade, transition:slide 등은 Svelte에서 미리 정의해둔 기본 애니메이션이에요!
• 애니메이션 중에 이벤트를 캐치해서 추가적인 동작을 수행할 수 있어요. on:introend, on:outroend 이벤트를 기억하세요!
• Transitions는 단순히 보여지는 시각적 효과뿐만 아니라, 애니메이션이 끝난 후에 처리해야 할 작업이 있을 때 유용하게 사용할 수 있습니다!

Svelte의 Transitions는 매우 직관적이면서도 강력한 도구예요. in, out 애니메이션을 자유롭게 조정할 수 있어서 정말 간단한 것 같아요 ㅎㅎ👍