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