Nuxt.js 페이지 전환 애니메이션 설정하는 방법

Nuxt.js는 페이지 전환이 발생할 때마다 애니메이션을 통해 부드러운 화면 전환이 가능합니다. 이를 사용하려면 다음과 같이 설정할 수 있습니다.

1. nuxt.config.js 파일 수정: 먼저 nuxt.config.js 파일을 열고, pageTransition 속성을 추가합니다.

    module.exports = {
      // 기존 설정
      pageTransition: {
        name: 'fade', // 애니메이션 이름 설정
        mode: 'out-in' // 애니메이션 모드 설정
      }
    }
   

   위 예시에서는 페이지 전환 애니메이션으로 “fade”를 사용하고, 애니메이션 모드로 “out-in”을 설정하였습니다.

2. 애니메이션 CSS 추가: 설정된 애니메이션 이름에 해당하는 CSS 효과를 추가합니다.

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

   위 CSS 코드에서는 “fade” 애니메이션에 대한 효과를 정의하였습니다.

이제 설정된 페이지 전환 애니메이션을 통해 Nuxt.js 애플리케이션에서 부드러운 화면 전환이 가능합니다.

참고 문헌: Nuxt.js 공식 문서 - 페이지 전환 애니메이션

이상으로 Nuxt.js에서의 페이지 전환 애니메이션 사용 방법에 대해 알아보았습니다.