[Vue3] UI animation 2개

UI가 등장하거나 퇴장할 때 살짝 애니메이션 효과를 주고 싶을 때가 있습니다.

애니메이션을 주는 방법은 크게 2가지가 있습니다.

---

1️⃣ 쌩 CSS로 애니메이션 주는 법

1. 애니메이션 시작 전에 적용할 클래스 스타일을 미리 디자인합니다.
2. 애니메이션 동작 후에 적용할 클래스 스타일도 디자인해둡니다.
3. 특정 이벤트(예: 모달창이 열릴 때)에 해당 클래스를 조건부로 부착하여 애니메이션을 실행합니다.
4. 시작 전 클래스에 transition 속성을 주면 부드러운 애니메이션 효과가 완성됩니다.

조건부 클래스 부착 예시 (Vue3)

<template>
  <!-- data의 isActive가 true일 때 "active" 클래스가 부착 -->
  <div :class="{ active: isActive }">
    애니메이션 적용 박스
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isActive = ref(false)
// 버튼 클릭 등으로 isActive 값을 토글하면 클래스가 추가되어 애니메이션이 실행됨
</script>

<style scoped>
.active {
  /* 예시: 배경색과 트랜지션 효과 */
  background-color: #f0f;
  transition: background-color 0.5s ease;
}
</style>

---

2️⃣ Vue에서 제공하는 <Transition> 컴포넌트 사용하기

Vue의 <Transition> 컴포넌트를 사용하면 CSS로 애니메이션을 간단하게 적용할 수 있습니다.

(업데이트 사항: 기존의 <transition> 태그는 <Transition>로 변경)

사용 방법

1. 애니메이션을 주고 싶은 UI를 <Transition name="작명"> ... </Transition>으로 감쌉니다.
2. CSS에 아래와 같이 스타일을 지정합니다.

• .작명-enter-from : 애니메이션 시작 전 상태
• .작명-enter-active : 애니메이션 동작 중 상태 (대부분 transition 속성을 지정)
• .작명-enter-to : 애니메이션 동작 후 상태

퇴장 애니메이션을 적용하고 싶으면 enter 대신 leave를 사용하면 됩니다.

Vue3 <script setup> 예시

<template>
  <div>
    <button @click="show = !show">토글 애니메이션</button>
    <!-- <Transition> 컴포넌트로 감싸면 Vue가 자동으로 애니메이션 클래스 부여 -->
    <Transition name="fade">
      <div v-if="show" class="box">애니메이션 박스</div>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<style scoped>
/* 등장 애니메이션 */
.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.5s ease;
}
.fade-enter-to {
  opacity: 1;
}

/* 퇴장 애니메이션 */
.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-leave-to {
  opacity: 0;
}
</style>