트랜지션과 애니메이션은 사용자 경험에서 중요한 역할을 합니다. 웹 페이지의 요소 사이에 미묘한 애니메이션과 전환을 추가하면 사용자 경험을 향상시킬 수 있습니다. 웹 사이트가 훨씬 더 매끄럽고 매력적이며 전반적으로 더 좋아 보일 것입니다.
이 튜토리얼에서는 Vue.js에서 트랜지션과 애니메이션을 구현하는 방법을 보여 줍니다. 트랜지션 컴포넌트와 CSS 키프레임을 사용하여 간단한 트랜지션과 복잡한 애니메이션을 모두 만드는 방법을 배웁니다.
Vue.js 트랜지션 컴포넌트
Vue.js에는 앱에서 애니메이션을 만들 수 있는 트랜지션 컴포넌트가 내장되어 있습니다. 이 컴포넌트는 애니메이션을 적용하려는 대상 요소를 둘러싸고 있습니다.
여기서 트랜지션 컴포넌트는 레벨 1 헤더를 래핑합니다:
<transition>
<h1> Hello </h1>
</transition>
트랜지션 컴포넌트로 요소를 래핑하면 컴포넌트는 래핑하는 요소에 트랜지션 클래스를 적용합니다. 총 6개의 트랜지션 클래스가 있습니다. 3개는 페이지에 들어올 때 요소의 애니메이션을 제어합니다. 나머지 3개는 페이지에서 벗어날 때 요소의 애니메이션을 제어합니다.
이 문서에 사용된 코드는 이 GitHub 리포지토리에서 사용할 수 있으며 MIT 라이선스에 따라 무료로 사용할 수 있습니다.
요소가 페이지에 진입할 때 트랜지션 클래스 적용
요소가 DOM에 진입하는 과정에서 트랜지션 컴포넌트는 enter-from, enter-to, enter-active 클래스를 해당 요소에 적용합니다. 이러한 클래스를 통해 요소에 애니메이션을 적용하거나 페이지로 전환하는 방식을 제어할 수 있습니다.
⭐ enter-from: 요소가 브라우저에 들어가기 전에 요소에 적용됩니다. 이 클래스를 사용하여 요소의 초기 CSS 상태를 설정합니다.
⭐ enter-to: 요소가 브라우저에 들어갈 때 요소에 적용됩니다. 이 클래스를 사용하여 요소의 최종 CSS 상태를 설정합니다.
⭐ enter-active: 요소가 한 상태에서 다른 상태로 전환되는 동안 적용됩니다. 여기에서 전환에 걸리는 시간을 지정할 수 있습니다.
예시를 살펴보겠습니다:
<transition>
<h1> Hello </h1>
</transition>
.enter-from {
opacity: 0;
}
.enter-to {
opacity: 1;
}
.enter-active {
transition: opacity 2s ease;
}
이 코드를 사용하면 레벨 1 헤더가 보이지 않음(불투명도: 0)에서 완전히 보임(불투명도: 1)으로 전환하는 데 2초가 걸립니다. 이 전환은 요소가 DOM에 들어갈 때 발생합니다. 전환이 없었다면 페이지가 로드되는 즉시 브라우저에 텍스트가 표시되었을 것입니다.
요소가 페이지를 떠날 때 트랜지션 클래스 적용
트랜지션 컴포넌트는 요소가 DOM을 떠날 때 적용해야 하는 세 가지 다른 트랜지션 클래스를 지원합니다. 그 이름은 leave-from, leave-to, leave-active입니다. 이러한 클래스는 요소가 페이지에서 애니메이션을 적용하거나 전환하는 방식을 제어합니다.
짐작하셨겠지만, 이러한 클래스는 앞서 설명한 enter 클래스와 유사합니다. 그러나 이러한 클래스는 요소가 DOM에서 마운트 해제하려고 할 때만 활성화됩니다. 마운팅과 마운트 해제는 DOM의 중요한 개념입니다. 개발자는 DOM 및 기타 관련 개념에 대한 기본적인 이해가 있어야 합니다.
예를 들어 보겠습니다.
<transition>
<h1> Hello </h1>
</transition>
.leave-from {
opacity: 0;
}
.leave-to {
opacity: 1;
}
.leave-active {
transition: opacity 2s ease;
}
이 경우 레벨 1 헤더는 표시(불투명도: 1)에서 보이지 않음(불투명도: 0)으로 천천히 전환하는 데 2초가 걸립니다. 이 전환은 요소가 DOM을 떠날 때 발생합니다. 전환이 없었다면 텍스트가 브라우저에서 즉시 사라졌을 것입니다.
트랜지션 이름 사용
트랜지션 컴포넌트에 이름 속성을 추가할 수도 있습니다. 이렇게 하면 Vue가 전환 클래스에 이름을 추가합니다. 즉, 페이지에 각각 고유한 트랜지션 클래스와 CSS 속성을 가진 여러 트랜지션을 가질 수 있습니다.
예를 들어, 트랜지션 컴포넌트에 페이드라는 이름을 설정하면 모든 트랜지션 클래스 앞에 페이드가 붙습니다:
<transition name ="fade">
<h1> Hello </h1>
</transition>
.fade-enter-from {
opacity: 1;
}
.fade-leave-from {
opacity: 1;
}
// other "enter" and "leave" classes with the fade as prefix
트랜지션 컴포넌트를 사용하여 트랜지션 만들기
Vue.js에서 트랜지션을 보여주기 위해 트랜지션 컴포넌트 내에 H1을 래핑합니다.
다음은 코드입니다:
<template>
<transition name="fade">
<h1 v-if="showTitle"> Hey People </h1>
</transition>
<button @click="showTitle = !showTitle"> Toggle </button>
</template>
다음으로 스크립트 섹션을 정의합니다. 이 섹션에는 showTitle 변수를 false로 초기화하는 설정 방법이 포함되어 있습니다.
<script>
import {ref} from 'vue'
export default {
name: "App",
setup() {
const showTitle = ref(false)
return {showTitle}
}
};
</script>
이제 브라우저에 텍스트와 버튼이 표시되어야 합니다:
버튼을 두 번 클릭하면 텍스트가 표시되었다가 사라집니다. 하지만 두 상태 사이에는 전환이 없습니다. 스타일 섹션에 전환을 추가해 보겠습니다:
<style>
.fade-enter-from {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-enter-active {
transition: opacity 2s ease;
}
.fade-leave-from {
opacity: 1
}
.fade-leave-to {
opacity: 0
}
.fade-leave-active {
transition: opacity 2s ease;
}
</style>
버튼을 처음 클릭하면 .enter 클래스를 사용하여 H1을 불투명에서 표시로 전환합니다. 그러나 버튼을 다시 클릭하면 .leave 클래스를 사용하여 H1을 표시에서 숨김으로 전환합니다.
두 트랜지션 세트 모두 2초가 걸리며 페이드 인 및 페이드 아웃됩니다. 또한 모든 클래스 이름에 페이드 이름이 추가되는 것을 볼 수 있습니다. 그렇게 하지 않으면 코드가 작동하지 않습니다.
CSS 키프레임으로 복잡한 애니메이션 만들기
애니메이션을 좀 더 복잡하게 만들고 싶을 때가 있습니다. Vue.js에서 이를 수행하는 방법은 CSS 키프레임 애니메이션을 만드는 것입니다. 더 자세히 알아보려면 심층적인 CSS 키프레임 애니메이션 가이드를 확인하세요.
예를 들어 흔들림 애니메이션 예제를 살펴봅시다. 이 애니메이션은 페이지에 진입할 때 H1을 왼쪽에서 오른쪽으로(또는 그 반대로) 흔들립니다.
@keyframes wobble {
0% { transform: translateY(-60px); opacity: 0}
50% {transform: translateY(0px); opacity: 1}
60% {transform: translateX(8px);}
70% {transform: translateX(-8px);}
80% {transform: translateX(4px);}
90% {transform: translateX(-4px);}
100% {transform: translateX(0px);}
}
애니메이션이 시작될 때 H1이 숨겨집니다. 애니메이션의 절반(50%)이 지나면 H1이 완전히 표시됩니다. 그런 다음 애니메이션의 후속 단계에서 텍스트를 왼쪽과 오른쪽으로 이동합니다. 이렇게 하면 흔들리는 효과가 나타납니다.
페이지에 들어갈 때 요소에 애니메이션을 적용합니다:
.fade-enter-active {
animation: wobble 0.5s ease;
}
이 경우 애니메이션은 0.5초 동안 지속됩니다.
Vue.js의 접근성에 대해 알아보기
트랜지션과 애니메이션이 사용자 경험을 개선하는 방법에 대해 강조했습니다. 사용자 경험의 또 다른 중요한 측면은 앱의 접근성을 높이는 것입니다. 모든 사용자가 동일하지는 않습니다. 장애가 있어 웹사이트의 콘텐츠를 소비하기 어려운 사용자도 있을 수 있습니다. 따라서 사이트도 접근성을 높이는 것이 중요합니다.