[javascript] Nuxt.js에서의 애니메이션 효과 추가 방법은?

19 Dec 2023

javascript

페이지 전환 애니메이션

Nuxt.js는 페이지간 전환 시 트랜지션 효과를 쉽게 추가할 수 있는 기능을 제공합니다. 페이지 전환 애니메이션을 사용하려면 다음과 같이 진행할 수 있습니다.

페이지 트랜지션 컴포넌트 생성

Nuxt.js에서는 layouts 폴더 아래에 _default.vue 형태의 레이아웃 파일을 생성한 뒤, 페이지 전환 애니메이션을 추가할 수 있습니다.

<template>
  <transition name="fade" mode="out-in">
    <nuxt />
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

페이지 트랜지션 효과 적용

<transition> 컴포넌트를 사용하여 효과를 적용할 수 있습니다. 위의 코드에서는 페이지 전환시 fade라는 이름의 트랜지션 효과를 적용하고 있습니다.

컴포넌트 애니메이션

페이지 전환 이외에도 컴포넌트 로딩시에도 애니메이션 효과를 추가할 수 있습니다. Vue.js에서는 transition 컴포넌트를 사용하여 컴포넌트 로딩 시 애니메이션을 적용할 수 있습니다.

<template>
  <transition name="slide-fade">
    <div class="alert" v-if="show">
      알림이 표시됩니다
    </div>
  </transition>
</template>

<style>
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(.5, -.5, .5, 1.5);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}
</style>

위의 코드에서는 slide-fade라는 이름의 트랜지션 효과를 정의하고, 컴포넌트 로딩 시 이 효과를 적용하고 있습니다.

Nuxt.js에서는 이 외에도 Vue 트랜지션 효과를 활용하여 다양한 애니메이션 효과를 추가할 수 있습니다.

애니메이션 효과를 적용하는 방법은 다양하므로 프로젝트 요구사항에 맞게 적절한 방법을 선택하여 사용할 수 있습니다.