56. Animating with CSS Transitions

npm create vue@latest


이 강의에서는 Vue 프로젝트에 애니메이션을 추가하는 방법을 배우게 됩니다.
요약하면 다음과 같습니다:

  1. CSS 애니메이션: CSS 애니메이션은 전환(transitions)과 애니메이션(animation) 두 가지 방법으로 추가할 수 있습니다.
    강의에서는 더 간단한 전환을 다룹니다.
  2. 애니메이션 단계: Vue는 애니메이션을 위해 몇 가지 클래스를 추가합니다.
    예를 들어, fade-enter-from, fade-enter-active 등의 클래스를 사용하여 애니메이션의 시작, 진행, 끝 단계를 제어합니다.
  3. 새 프로젝트 설정: 새로운 Vue 프로젝트를 만들고 기본 설정을 제거하여 동적 컴포넌트에 초점을 맞춥니다.
  4. 동적 컴포넌트: AboutHome 컴포넌트를 만들고 드롭다운 메뉴를 통해 선택된 컴포넌트를 동적으로 렌더링합니다.
  5. <transition> 컴포넌트 사용: 애니메이션을 적용하기 위해 <transition> 컴포넌트를 사용합니다.
    이 컴포넌트는 애니메이션을 위한 클래스를 자동으로 추가합니다.
  6. CSS 스타일 정의: fade-enter-activefade-leave-active 클래스에 대한 CSS 스타일을 정의하여 애니메이션 효과를 만듭니다.
  7. 애니메이션 테스트: 만들어진 애니메이션을 테스트하여 요소가 페이지에 들어오고 나갈 때 부드럽게 전환되는지 확인합니다.
  8. 애니메이션 최적화: 필요에 따라 사용할 클래스를 선택하고 간단하 게 유지하여 원하는 애니메이션 효과를 달성합니다. 불필요한 클래스를 사용하지 않도록 주의합니다.

이 강의를 통해 Vue에서 CSS 전환을 사용하여 애니메이션을 추가하는 기본적인 방법을 배웠으며, <transition> 컴포넌트를 사용하여 요소의 등장과 사라짐에 부드러운 애니메이션 효과를 적용하는 방법을 익혔습니다.
이러한 방법은 애플리케이션의 사용자 인터페이스를 개선하는데 유용하게 활용될 수 있습니다.

App.vue
<script setup lang="ts">
   import {ref} from "vue";

   const flag = ref(false)
</script>

<template>
   <button type="button" @click="flag = !flag">Toggle</button>
   <Transition name="fade">
      <h2 v-if="flag">Hello World!</h2>
   </Transition>
</template>

<style>
   .fade-enter-from {
      opacity: 0;
   }

   .fade-enter-active {
      transition: all 0.25s linear;
   }

   .fade-leave-to {
      transition: all 0.25s linear;
      opacity: 0;
   }
</style>