[javascript] Svelte에서 애니메이션을 적용하는 방법은 어떻게 되나요?
먼저, Svelte에서 애니메이션을 적용하기 위해 animate
디렉티브를 사용합니다. 이 디렉티브를 사용하여 요소에 애니메이션 클래스를 추가할 수 있습니다.
아래는 animate
디렉티브를 사용하여 요소에 애니메이션을 적용하는 방법입니다:
<script>
import { fadeIn } from 'svelte/transition';
let show = false;
</script>
<div class="box" animate:fade="{show}">
<p>안녕하세요!</p>
</div>
<button on:click="{() => show = !show}">토글</button>
<style>
.box {
opacity: 0;
transition: opacity 0.3s ease;
}
.box.fade {
opacity: 1;
}
</style>
위의 코드에서는 fade
트랜지션을 사용하여 애니메이션을 적용합니다. fadeIn
함수를 가져와서 애니메이션 효과를 정의하고, animate:fade
디렉티브를 사용하여 show
변수 값에 따라 애니메이션 클래스를 토글합니다.
또한, box.fade
스타일 클래스를 사용하여 투명도를 조정하여 애니메이션 효과를 생성합니다.
위의 예제에서는 페이드 인/아웃 애니메이션을 사용했지만, Svelte는 다양한 트랜지션을 제공하기 때문에 원하는 애니메이션 효과를 선택하여 사용할 수 있습니다.
이와 같이 Svelte에서 애니메이션을 적용하는 방법을 알아보았습니다. Svelte는 간결하고 효율적인 애니메이션 적용 방법을 제공하므로, 사용자 인터페이스에 동적인 요소를 추가할 때 유용하게 활용할 수 있습니다.