<Transition> 컴포넌트를 활용합니다.페이지 전체에 자동 전환을 적용하기 위해 페이지 전환을 활성화할 수 있습니다.
export default defineNuxtConfig({
app: {
pageTransition: { name: 'page', mode: 'out-in' },
},
})
페이지 간 전환을 추가하려면, 다음 CSS를 app.vue에 추가하세요:
<template>
<NuxtPage />
</template>
<style>
.page-enter-active,
.page-leave-active {
transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
filter: blur(1rem);
}
</style>
<template>
<div>
<h1>Home page</h1>
<NuxtLink to="/about">About page</NuxtLink>
</div>
</template>
<template>
<div>
<h1>About page</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
페이지 간 탐색 시 다음과 같은 결과가 생성됩니다:
특정 페이지에 다른 전환을 설정하려면, 해당 페이지의 definePageMeta에 pageTransition 키를 설정하세요:
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'rotate',
},
})
</script>
<template>
<NuxtPage />
</template>
<style>
/* ... */
.rotate-enter-active,
.rotate-leave-active {
transition: all 0.4s;
}
.rotate-enter-from,
.rotate-leave-to {
opacity: 0;
transform: rotate3d(1, 1, 1, 15deg);
}
</style>
about 페이지로 이동하면 3D 회전 효과가 추가됩니다:
레이아웃 전체에 자동 전환을 적용하기 위해 레이아웃 전환을 활성화할 수 있습니다.
export default defineNuxtConfig({
app: {
layoutTransition: { name: 'layout', mode: 'out-in' },
},
})
페이지와 레이아웃 간 전환을 추가하려면, 다음 CSS를 app.vue에 추가하세요:
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
<style>
.layout-enter-active,
.layout-leave-active {
transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
filter: grayscale(1);
}
</style>
<template>
<div>
<pre>default layout</pre>
<slot />
</div>
</template>
<style scoped>
div {
background-color: lightgreen;
}
</style>
<template>
<div>
<pre>orange layout</pre>
<slot />
</div>
</template>
<style scoped>
div {
background-color: #eebb90;
padding: 20px;
height: 100vh;
}
</style>
<template>
<div>
<h1>Home page</h1>
<NuxtLink to="/about">About page</NuxtLink>
</div>
</template>
<script setup lang="ts">
definePageMeta({
layout: 'orange',
})
</script>
<template>
<div>
<h1>About page</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
페이지 간 탐색 시 다음과 같은 결과가 생성됩니다:
pageTransition과 마찬가지로, definePageMeta를 사용하여 페이지 컴포넌트에 커스텀 layoutTransition을 적용할 수 있습니다:
<script setup lang="ts">
definePageMeta({
layout: 'orange',
layoutTransition: {
name: 'slide-in',
},
})
</script>
nuxt.config를 사용하여 이러한 기본 전환 이름을 전역적으로 커스터마이즈할 수 있습니다.
pageTransition과 layoutTransition 키는 모두 JSON 직렬화 가능한 값으로 TransitionProps를 허용하며, 여기에서 name, mode 및 커스텀 CSS 전환의 다른 유효한 transition-props를 전달할 수 있습니다.
export default defineNuxtConfig({
app: {
pageTransition: {
name: 'fade',
mode: 'out-in', // 기본값
},
layoutTransition: {
name: 'slide',
mode: 'out-in', // 기본값
},
},
})
name 속성을 변경하는 경우, CSS 클래스 이름도 그에 맞게 변경해야 합니다.전역 전환 속성을 재정의하려면, definePageMeta를 사용하여 단일 Nuxt 페이지에 대해 페이지 또는 레이아웃 전환을 정의하고, nuxt.config 파일에 전역적으로 정의된 모든 페이지 또는 레이아웃 전환을 재정의하세요.
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'bounce',
mode: 'out-in', // 기본값
},
})
</script>
특정 라우트에 대해 pageTransition과 layoutTransition을 비활성화할 수 있습니다:
<script setup lang="ts">
definePageMeta({
pageTransition: false,
layoutTransition: false,
})
</script>
또는 nuxt.config에서 전역적으로 비활성화할 수 있습니다:
export default defineNuxtConfig({
app: {
pageTransition: false,
layoutTransition: false,
},
})
고급 사용 사례의 경우, JavaScript 훅을 사용하여 Nuxt 페이지에 매우 동적인 커스텀 전환을 생성할 수 있습니다.
이 방식은 GSAP과 같은 JavaScript 애니메이션 라이브러리에 완벽한 사용 사례를 제공합니다.
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'custom-flip',
mode: 'out-in',
onBeforeEnter: (el) => {
console.log('Before enter...')
},
onEnter: (el, done) => {},
onAfterEnter: (el) => {},
},
})
</script>
Transition 컴포넌트에서 사용할 수 있는 추가 JavaScript 훅에 대해 더 알아보세요.조건부 로직을 사용하여 동적 전환을 적용하려면, 인라인 미들웨어를 활용하여 to.meta.pageTransition에 다른 전환 이름을 할당할 수 있습니다.
<script setup lang="ts">
definePageMeta({
pageTransition: {
name: 'slide-right',
mode: 'out-in',
},
middleware (to, from) {
if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean') {
to.meta.pageTransition.name = +to.params.id! > +from.params.id! ? 'slide-left' : 'slide-right'
}
},
})
</script>
<template>
<h1>#{{ $route.params.id }}</h1>
</template>
<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition: all 0.2s;
}
.slide-left-enter-from {
opacity: 0;
transform: translate(50px, 0);
}
.slide-left-leave-to {
opacity: 0;
transform: translate(-50px, 0);
}
.slide-right-enter-from {
opacity: 0;
transform: translate(-50px, 0);
}
.slide-right-leave-to {
opacity: 0;
transform: translate(50px, 0);
}
</style>
<script setup lang="ts">
const route = useRoute()
const id = computed(() => Number(route.params.id || 1))
const prev = computed(() => '/' + (id.value - 1))
const next = computed(() => '/' + (id.value + 1))
</script>
<template>
<div>
<slot />
<div v-if="$route.params.id">
<NuxtLink :to="prev">⬅️</NuxtLink> |
<NuxtLink :to="next">➡️</NuxtLink>
</div>
</div>
</template>
이제 페이지는 다음 id로 이동할 때 slide-left 전환을, 이전으로 이동할 때는 slide-right 전환을 적용합니다:
app.vue에서 <NuxtPage />를 사용할 때, transition prop으로 전역적으로 전환을 활성화하도록 설정할 수 있습니다.
<template>
<div>
<NuxtLayout>
<NuxtPage
:transition="{
name: 'bounce',
mode: 'out-in',
}"
/>
</NuxtLayout>
</div>
</template>
definePageMeta로 재정의할 수 없다는 점을 기억하세요.Nuxt는 View Transitions API의 실험적 구현을 제공합니다(참고: MDN). 이는 (그 외 여러 기능과 함께) 서로 관련 없는 다른 페이지의 요소들 간에도 전환을 수행할 수 있는 네이티브 브라우저 전환을 구현하는 흥미로운 새로운 방법입니다.
StackBlitz에서 데모를 확인할 수 있습니다.
Nuxt 통합은 설정 파일에서 experimental.viewTransition 옵션으로 활성화할 수 있습니다:
export default defineNuxtConfig({
experimental: {
viewTransition: true,
},
})
가능한 값은 false, true, 또는 'always'입니다.
true로 설정하면, Nuxt는 사용자의 브라우저가 prefers-reduced-motion: reduce와 일치하는 경우 전환을 적용하지 않습니다(권장). always로 설정하면, Nuxt는 항상 전환을 적용하며 사용자의 환경 설정을 존중하는 것은 여러분에게 달려 있습니다.
기본적으로, view 전환은 모든 페이지에 대해 활성화되어 있지만, 다른 전역 기본값을 설정할 수 있습니다.
export default defineNuxtConfig({
app: {
// 전역적으로 view 전환을 비활성화하고, 페이지별로 opt-in 합니다
viewTransition: false,
},
})
페이지의 definePageMeta에서 viewTransition 키를 설정하여, 페이지에 대한 기본 viewTransition 값을 재정의할 수 있습니다:
<script setup lang="ts">
definePageMeta({
viewTransition: false,
})
</script>
experimental.viewTransition 옵션을 활성화한 경우에만 효과가 있습니다.위에서 설명한 것처럼, 새로운 View Transitions API와 동일한 결과를 얻기 위해 pageTransition 및 layoutTransition과 같은 Vue 전환도 사용하고 있다면, 사용자의 브라우저가 더 새로운 네이티브 웹 API를 지원하는 경우 Vue 전환을 비활성화 하고 싶을 수 있습니다. 이를 위해 다음 내용을 가진 ~/middleware/disable-vue-transitions.global.ts를 생성할 수 있습니다:
export default defineNuxtRouteMiddleware((to) => {
if (import.meta.server || !document.startViewTransition) {
return
}
// 기본 제공 Vue 전환 비활성화
to.meta.pageTransition = false
to.meta.layoutTransition = false
})
<Suspense>가 resolve되기 직전의 마지막 순간으로 제한하는 방안을 검토 중이지만, 그 전까지는 이 설명에 해당한다면 이 기능을 도입할지 신중히 고려해 보시기 바랍니다.