58. Animating with CSS Animations

링크open in new window

npm create vue@latest

프로젝트 링크

이 강의에서는 Vue에서 CSS 애니메이션을 사용하여 요소를 애니메이션하는 방법을 배우게 됩니다.
요약하면 다음과 같습니다:

CSS 애니메이션 사용: CSS 애니메이션은 CSS 전환보다 더 복잡한 애니메이션을 제어하는 데 더 많은 옵션을 제공합니다.
강의에서는 기본 transition을 주석 처리하고 새로운 transition 컴포넌트를 추가하여 애니메이션을 구현합니다.
Zoom 애니메이션 생성: keyframes를 사용하여 zoom in 및 zoom out 애니메이션을 만듭니다.
이 애니메이션은 요소가 페이지에 들어오거나 나갈 때 확대 및 축소 효과를 줍니다.
애니메이션 적용: transition 컴포넌트 안에 있는 요소에 zoom-enter-active 및 zoom-leave-active 클래스에 애니메이션을 적용합니다.
이 클래스는 애니메이션이 실행되는 동안 요소에 적용됩니다.
애니메이션과 전환의 조합: 애니메이션과 CSS 전환을 동시에 적용하여 요소에 여러 효과를 줄 수 있습니다.
예를 들어, 확대/축소와 페이드 효과를 결합할 수 있습니다.
애니메이션 지속 시간 설정: 애니메이션과 전환의 지속 시간이 서로 다를 경우 Vue는 더 긴 지속 시간을 사용합니다.
type 속성을 사용하여 어떤 지속 시간을 우선시할지 지정할 수 있습니다.
페이지 로드 시 애니메이션 실행: appear 속성을 transition 컴포넌트에 추가하여 페이지 로드 시 애니메이션을 실행할 수 있습니다.

이 강의를 통해 Vue에서 CSS 애니메이션을 사용하여 다양한 애니메이션 효과를 적용하는 방법을 배웠으며, 애니메이션과 전환을 조합하여 더욱 풍부한 사용자 경험을 제공하는 방법을 익혔습니다.

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="zoom" type="animation">
      <h2 v-if="flag">Hello</h2>
   </Transition>
</template>

<style>
   h2 {
      width: 400px;
      padding: 20px;
      margin: 20px;
   }

   .fade-enter-from {
      opacity: 0;
   }

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

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

   .zoom-enter-active {
      animation: zoom-in 1s linear forwards;
      transition: all 2s linear;
   }

   .zoom-leave-active {
      animation: zoom-out 1s linear forwards;
      transition: all 2s linear;
   }
   .zoom-enter-from {
      opacity: 0;
   }
   .zoom-leave-to {
      opacity: 0;
   }

   @keyframes zoom-in {
      from {
         transform: scale(0, 0);
      }
      to {
         transform: scale(1, 1);
      }
   }

   @keyframes zoom-out {
      from {
         transform: scale(1, 1);
      }
      to {
         transform: scale(0, 0);
      }
   }
</style>

# 58. Animating with CSS Animations

58. Animating with CSS Animations