애니메이션과 트랜지션의 차이점
프론트엔드 개발에서 시각적 효과를 추가할 때 주로 사용하는 두 가지 기법은 애니메이션(Animation)과 트랜지션(Transition)이다. 이 둘은 비슷해 보이지만 목적과 사용 방식에 차이가 있다.
- 트랜지션: 두 상태 사이의 간단한 변화를 부드럽게 연결한다. 예를 들어, 색상이나 투명도 같은 CSS 속성이 변경될 때 서서히 전환되도록 한다.
- 애니메이션: 더 복잡한 동작을 표현할 수 있으며, 여러 개의 중간 프레임(키프레임)을 정의하여 세밀한 움직임을 제어할 수 있다.
CSS 기반 애니메이션 활용
CSS의 @keyframes 규칙을 사용하면 원하는 시간대에 맞춰 요소의 스타일을 단계적으로 변화시킬 수 있다. 아래는 수평 방향으로 왼쪽-오른쪽 이동을 반복하는 애니메이션 예제다.
@keyframes slideShift {
0% {
transform: translateX(0);
}
50% {
transform: translateX(60px);
}
100% {
transform: translateX(0);
}
}
.movingElement {
animation: slideShift 2.5s ease-in-out;
}
Vue 인스턴스 내에서 애니메이션 제어
Vue에서는 데이터 상태에 따라 클래스 바인딩을 통해 애니메이션을 동적으로 적용할 수 있다. 다음 코드는 특정 조건이 충족되었을 때 애니메이션을 실행하도록 구성된 예시다.
<template>
<div :class="{ movingElement: shouldAnimate }">움직이는 텍스트</div>
</template>
<script>
export default {
data() {
return {
shouldAnimate: false
};
},
methods: {
triggerAnimation() {
this.shouldAnimate = true;
},
resetAnimation() {
this.shouldAnimate = false;
}
}
};
</script>
사용자 상호작용을 통한 애니메이션 실행
마우스 오버 또는 클릭과 같은 이벤트를 기반으로 애니메이션을 유도할 수 있다. 이를 통해 사용자 경험을 더욱 직관적으로 만들 수 있다.
<div
:class="{ movingElement: isActive }"
@mouseenter="activate"
@mouseleave="deactivate">
마우스를 올려보세요
</div>
스크립트 부분:
methods: {
activate() {
this.isActive = true;
},
deactivate() {
this.isActive = false;
}
}
CSS 트랜지션 기본 개념
트랜지션은 특정 속성의 변화를 서서히 진행하게 해준다. 예를 들어, 배경색이 즉시 변하는 대신 서서히 변하도록 설정할 수 있다.
.colorBlock {
background-color: #f0d96e;
transition: background-color 2s;
}
.colorBlock:hover {
background-color: #7fd1b9;
}
Vue에서의 트랜지션 응용
데이터 바인딩과 함께 트랜지션을 사용하면 상태 변화에 따라 자연스러운 시각 효과를 제공할 수 있다.
<div
:class="{ colorBlock: true, highlight: isHighlighted }"
@mouseover="isHighlighted = true"
@mouseout="isHighlighted = false">
호버하여 색상 변경
</div>
조건부 렌더링 시 입출력 애니메이션
Vue는 <transition> 컴포넌트를 제공하여 v-if나 v-show로 제어되는 요소의 등장 및 사라짐 애니메이션을 쉽게 구현할 수 있다.
입장/퇴장 트랜지션
투명도 변화를 이용한 서서로 나타나고 사라지는 효과:
<style>
.fade-enter-from {
opacity: 0;
}
.fade-enter-to {
opacity: 1;
}
.fade-enter-active {
transition: opacity 1.8s;
}
.fade-leave-from {
opacity: 1;
}
.fade-leave-to {
opacity: 0;
}
.fade-leave-active {
transition: opacity 1.8s;
}
</style>
<transition name="fade">
<p v-if="isVisible">내용이 여기에 표시됩니다</p>
</transition>
키프레임 기반 애니메이션
보다 다이내믹한 동작을 위해 CSS 애니메이션을 활용할 수 있다.
@keyframes slideIn {
from { transform: translateX(-80px); }
to { transform: translateX(0); }
}
@keyframes slideOut {
from { transform: translateX(0); }
to { transform: translateX(-80px); }
}
.slide-enter-active {
animation: slideIn 0.6s;
}
.slide-leave-active {
animation: slideOut 0.6s;
}
혼합 애니메이션 효과
트랜지션과 애니메이션을 동시에 사용해 더 풍부한 시각 효과를 낼 수 있다. 예를 들어, 등장할 때 위치 이동과 함께 서서히 나타나도록 구성할 수 있다.
.mixed-enter-active {
animation: slideIn 1s;
transition: opacity 1s;
}
.mixed-enter-from,
.mixed-leave-to {
opacity: 0;
}
리스트 항목의 애니메이션 처리
여러 개의 요소를 다룰 때는 <transition-group>을 사용한다. 이 태그는 리스트 아이템의 추가, 제거, 순서 변경 시에도 부드러운 애니메이션을 지원한다.
<ul>
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id" :data-id="item.id">
{{ item.text }}
</li>
</transition-group>
</ul>
CSS에서 이동 애니메이션을 정의하면, 요소들이 재정렬될 때 자연스럽게 움직인다.
.list-move {
transition: transform 0.4s;
}
새 항목이 추가되면 키프레임 애니메이션이 발동하고, 기존 항목들은 .list-move를 통해 부드럽게 자리를 조정한다.