From 3f470b8ef6d50deb64045b3d52fcba916609fd46 Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Wed, 5 Oct 2022 03:55:37 +1000
Subject: [PATCH 1/6] docs(getting-started): add transitions page

---
 .../1.getting-started/5.transitions.md        | 260 ++++++++++++++++++
 1 file changed, 260 insertions(+)
 create mode 100644 docs/content/1.getting-started/5.transitions.md

diff --git a/docs/content/1.getting-started/5.transitions.md b/docs/content/1.getting-started/5.transitions.md
new file mode 100644
index 00000000000..8d1688fc214
--- /dev/null
+++ b/docs/content/1.getting-started/5.transitions.md
@@ -0,0 +1,260 @@
+# Transitions
+
+Nuxt uses the [`Transition`](https://vuejs.org/guide/built-ins/transition.html#the-transition-component) component under the hood to apply page transitions between the routes and layout transitions on the custom layouts.
+
+Both page and layout transitions are applied using [`definePageMeta`](/api/utils/define-page-meta) utility function. You can add the `pageTransition` key to the `definePageMeta` of your page component to define a custom page transition for a specific route.
+
+```vue [pages/some-page.vue]
+<script setup lang="ts">
+  definePageMeta({
+    pageTransition: {
+      name: 'fade-in'
+    }
+})
+</script>
+```
+
+When you apply a custom `layout` to your page component using `definePageMeta`, you can also add the `layoutTransition` key to define a layout transition for that custom layout.
+
+```vue [pages/some-page.vue]
+<script setup lang="ts">
+  definePageMeta({
+    layout: 'custom',
+    layoutTransition: {
+      name: 'slide-in'
+    }
+})
+</script>
+```
+
+::alert{type="warning"}
+`<NuxtPage />` and `<NuxtLayout />` are already wrapped around Vue’s `<Transition />` component and you do not need to add the `<Transition>` component separately to your Nuxt pages or layouts.
+::
+
+## Global Settings
+
+Default name of `pageTransition` is `page`, while the default name of `layoutTransition` is `layout`.
+
+You can create CSS transitions with the name of `page` or `layout` to activate default page and layout transition respectively. Then, define the global CSS in `nuxt.config`.
+
+::code-group
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  css: [
+    // Global CSS
+    '@/assets/style/main.css',
+  ]
+})
+```
+
+```CSS [assets/style/main.css]
+/* Page transition */
+.page-enter-active {
+  animation: slideIn .5s ease-out both;
+}
+
+.page-leave-active {
+  animation: slideOut .5s ease-in both;
+}
+
+@keyframes slideIn {
+  0% {
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideOut {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+/* Layout  transition */
+.layout-enter-active {
+  animation: bounce-in 0.5s;
+}
+
+.layout-leave-active {
+  animation: bounce-in 0.5s reverse;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+
+  50% {
+    transform: scale(1.25);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+```
+
+::
+
+You can customize these default transition names globally using `nuxt.config`. Both `pageTransition` and `layoutTransition` keys accept `TransitionProps` JSON-serialized values where you can pass the `name` and `mode` of the custom CSS transition.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  pageTransition: {
+    name: 'fade',
+    mode: 'out-in' // default
+  },
+  layoutTransition: {
+    name: 'slide',
+    mode: 'out-in' // default
+  }  
+})
+```
+
+If you do modify the page Transition `name`, you will also have to rename the css classes accordingly.
+
+::alert{type="warning"}
+These globally defined page and layout transitions can be overridden with `definePageMeta` on an individual page.
+::
+
+### Override Global Transition
+
+`definePageMeta` is used to define page or layout transitions for a single Nuxt page and override any page or layout transitions that are defined globally in `nuxt.config` file.
+
+```vue [pages/some-page.vue]
+<script setup lang="ts">
+  definePageMeta({
+    pageTransition: {
+      name: 'bounce',
+      mode: 'out-in' // default
+    }
+})
+</script>
+```
+
+## Disable Transitions
+
+`pageTransition` and `layoutTransition` can be disabled for a specific route if required.
+
+```vue [pages/some-page.vue]
+<script setup lang="ts">
+  definePageMeta({
+    pageTransition: false
+    layoutTransition: false
+})
+</script>
+```
+
+## JavaScript Hooks
+
+For advanced use-cases, you can use JavaScript hooks to create highly dynamic and custom transitions for your Nuxt routes.
+
+This way presents perfect use-cases for JavaScript animation libraries such as [GSAP](https://greensock.com/gsap/) or [Tween.js](https://createjs.com/tweenjs).
+
+```vue [pages/some-page.vue]
+<script setup lang="ts">
+definePageMeta({
+  pageTransition: {
+    name: 'custom-flip',
+    mode: 'out-in',
+    onBeforeEnter: (el) => {
+      console.log('Before enter...')
+    },
+    onEnter: (el, done) => {},
+    onAfterEnter: (el) => {}
+  }
+})
+</script>
+```
+
+::alert{type="info"}
+Learn more about additional [JavaScript hooks](https://vuejs.org/guide/built-ins/transition.html#javascript-hooks) available in the `Transition` component.
+::
+
+## Dynamic Transitions
+
+After disabling the default `pageTransition: false`, you can apply dynamic transitions using conditional logic to assign dynamic transitions directly to `to.meta.pageTransition` on your Nuxt pages.
+
+This example also uses the pre-configured animation library, [Animate.css](https://animate.style/).
+
+::code-group
+
+```vue [pages/some-page.vue]
+<script setup lang="ts">
+const Router = useRouter()
+onMounted(async () => {
+  Router.afterEach((to, from) => {
+    to.meta.pageTransition = +to.params.slug < +from.params.slug
+    ? {
+      name: 'a',
+      mode: 'out-in',
+      appearActiveClass: "animate__animated animate__slideInRight",
+      enterActiveClass: "animate__animated animate__slideInRight",
+      leaveActiveClass: "animate__animated animate__slideOut",
+      duration: 500,
+    }
+    : {
+      name: 'a',
+      mode: 'out-in',
+      appearActiveClass: "animate__animated animate__slideInRight",
+      enterActiveClass: "animate__animated animate__slideInLeft",
+      leaveActiveClass: "animate__animated animate__slideOut",
+      duration: 500,
+    }
+  })
+})
+
+definePageMeta({
+  pageTransition: false,
+})
+</script>
+```
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  app: {
+    head: {
+      link: [
+        {
+          rel: "stylesheet",
+          href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+        }
+      ]
+    }
+  }
+})
+```
+
+::
+
+::alert{type="info"}
+Learn more about additional props to customize [transition classes](https://vuejs.org/api/built-in-components.html#transition) in the `Transition` component.
+::
+
+## Transition with NuxtPage
+
+When `<NuxtPage />` is used in `app.vue`, transition-props can be passed directly as a component props to activate global transition.
+
+```vue [app.vue]
+<template>
+  <div>
+      <NuxtPage :transition="{
+        name: 'bounce',
+        mode: 'out-in'
+      }" />
+    </NuxtLayout>
+  </div>
+</template>
+```
+
+::alert{type="warning"}
+Remember, this page transition cannot be overridden with `definePageMeta` on individual pages.
+::

From c0ecf9b6b8892a98ae6828b499adbf6ed23de3cd Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Wed, 5 Oct 2022 04:20:30 +1000
Subject: [PATCH 2/6] docs(getting-started): add weblink to Vue transition

---
 docs/content/1.getting-started/5.transitions.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/content/1.getting-started/5.transitions.md b/docs/content/1.getting-started/5.transitions.md
index 8d1688fc214..3d114528358 100644
--- a/docs/content/1.getting-started/5.transitions.md
+++ b/docs/content/1.getting-started/5.transitions.md
@@ -104,7 +104,7 @@ export default defineNuxtConfig({
 
 ::
 
-You can customize these default transition names globally using `nuxt.config`. Both `pageTransition` and `layoutTransition` keys accept `TransitionProps` JSON-serialized values where you can pass the `name` and `mode` of the custom CSS transition.
+You can customize these default transition names globally using `nuxt.config`. Both `pageTransition` and `layoutTransition` keys accept [`TransitionProps`](https://vuejs.org/api/built-in-components.html#transition) as JSON serializable values where you can pass the `name`, `mode` and other valid transition-props of the custom CSS transition.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -119,7 +119,7 @@ export default defineNuxtConfig({
 })
 ```
 
-If you do modify the page Transition `name`, you will also have to rename the css classes accordingly.
+If you do modify the page Transition `name`, you will also have to rename the CSS classes accordingly.
 
 ::alert{type="warning"}
 These globally defined page and layout transitions can be overridden with `definePageMeta` on an individual page.

From 6216fe1fa2462a5e3cd73364f174c734ed8a6934 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Thu, 6 Oct 2022 11:44:44 +0200
Subject: [PATCH 3/6] Update docs/content/1.getting-started/5.transitions.md

---
 docs/content/1.getting-started/5.transitions.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/1.getting-started/5.transitions.md b/docs/content/1.getting-started/5.transitions.md
index 3d114528358..9c78050e375 100644
--- a/docs/content/1.getting-started/5.transitions.md
+++ b/docs/content/1.getting-started/5.transitions.md
@@ -48,7 +48,7 @@ export default defineNuxtConfig({
 })
 ```
 
-```CSS [assets/style/main.css]
+```css [assets/style/main.css]
 /* Page transition */
 .page-enter-active {
   animation: slideIn .5s ease-out both;

From 2249dc3cfdc2c985d91abf2da74b1fdc44effd11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Ollivier?= <clement.o2p@gmail.com>
Date: Thu, 6 Oct 2022 11:44:49 +0200
Subject: [PATCH 4/6] Update docs/content/1.getting-started/5.transitions.md

---
 docs/content/1.getting-started/5.transitions.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/content/1.getting-started/5.transitions.md b/docs/content/1.getting-started/5.transitions.md
index 9c78050e375..84b85d4e376 100644
--- a/docs/content/1.getting-started/5.transitions.md
+++ b/docs/content/1.getting-started/5.transitions.md
@@ -1,3 +1,7 @@
+---
+navigation.icon: uil:moon-eclipse
+description: Nuxt uses the Transition component under the hood to apply page transitions between routes.
+---
 # Transitions
 
 Nuxt uses the [`Transition`](https://vuejs.org/guide/built-ins/transition.html#the-transition-component) component under the hood to apply page transitions between the routes and layout transitions on the custom layouts.

From e13c8796a5e236b27568d7a3d7b5dc8f5a1ccae2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Thu, 6 Oct 2022 17:18:54 +0200
Subject: [PATCH 5/6] docs: big rewrite for clarity and videos

---
 .../1.getting-started/5.transitions.md        | 385 ++++++++++++------
 1 file changed, 253 insertions(+), 132 deletions(-)

diff --git a/docs/content/1.getting-started/5.transitions.md b/docs/content/1.getting-started/5.transitions.md
index 84b85d4e376..848c96e2b7e 100644
--- a/docs/content/1.getting-started/5.transitions.md
+++ b/docs/content/1.getting-started/5.transitions.md
@@ -2,113 +2,213 @@
 navigation.icon: uil:moon-eclipse
 description: Nuxt uses the Transition component under the hood to apply page transitions between routes.
 ---
+
 # Transitions
 
-Nuxt uses the [`Transition`](https://vuejs.org/guide/built-ins/transition.html#the-transition-component) component under the hood to apply page transitions between the routes and layout transitions on the custom layouts.
+Nuxt leverages Vue's [`<Transition>`](https://vuejs.org/guide/built-ins/transition.html#the-transition-component) component to apply transitions between pages and layouts.
 
-Both page and layout transitions are applied using [`definePageMeta`](/api/utils/define-page-meta) utility function. You can add the `pageTransition` key to the `definePageMeta` of your page component to define a custom page transition for a specific route.
+## Page transitions
 
-```vue [pages/some-page.vue]
-<script setup lang="ts">
-  definePageMeta({
-    pageTransition: {
-      name: 'fade-in'
-    }
-})
-</script>
+Nuxt sets `{ name: 'page', mode: 'out-in' }` transition by default for all your [pages](/guide/directory-structure/pages).
+
+To start adding transition between your pages, add the following CSS to your [`app.vue`](/guide/directory-structure/app):
+
+::code-group
+
+```html [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>
 ```
 
-When you apply a custom `layout` to your page component using `definePageMeta`, you can also add the `layoutTransition` key to define a layout transition for that custom layout.
+```html [pages/index.vue]
+<template>
+  <div>
+    <h1>Home page</h1>
+    <NuxtLink to="/about">About page</NuxtLink>
+  </div>
+</template>
+```
 
-```vue [pages/some-page.vue]
-<script setup lang="ts">
-  definePageMeta({
-    layout: 'custom',
-    layoutTransition: {
-      name: 'slide-in'
-    }
-})
-</script>
+```html [pages/about.vue]
+<template>
+  <div>
+    <h1>About page</h1>
+    <NuxtLink to="/">Home page</NuxtLink>
+  </div>
+</template>
 ```
 
-::alert{type="warning"}
-`<NuxtPage />` and `<NuxtLayout />` are already wrapped around Vue’s `<Transition />` component and you do not need to add the `<Transition>` component separately to your Nuxt pages or layouts.
 ::
 
-## Global Settings
+This produces the following result when navigating between pages:
 
-Default name of `pageTransition` is `page`, while the default name of `layoutTransition` is `layout`.
+<video controls class="rounded">
+  <source src="https://res.cloudinary.com/nuxt/video/upload/v1665061349/nuxt3/nuxt3-page-transitions_umwvmh.mp4" type="video/mp4">
+</video>
 
-You can create CSS transitions with the name of `page` or `layout` to activate default page and layout transition respectively. Then, define the global CSS in `nuxt.config`.
+To set a different transition for a page, set the `pageTransition` key in [`definePageMeta`](/api/utils/define-page-meta) of the page:
 
 ::code-group
 
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  css: [
-    // Global CSS
-    '@/assets/style/main.css',
-  ]
+```vue [pages/about.vue]
+<script setup lang="ts">
+definePageMeta({
+  pageTransition: {
+    name: 'rotate'
+  }
 })
+</script>
 ```
 
-```css [assets/style/main.css]
-/* Page transition */
-.page-enter-active {
-  animation: slideIn .5s ease-out both;
-}
+```html [app.vue]
+<template>
+  <NuxtPage />
+</template>
 
-.page-leave-active {
-  animation: slideOut .5s ease-in both;
+<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>
+```
 
-@keyframes slideIn {
-  0% {
-    transform: translate3d(-100%, 0, 0);
-  }
+::
 
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-}
+Moving to the about page will add the 3d rotation effect:
 
-@keyframes slideOut {
-  0% {
-    transform: translate3d(0, 0, 0);
-  }
+<video controls class="rounded">
+  <source src="https://res.cloudinary.com/nuxt/video/upload/v1665063233/nuxt3/nuxt3-page-transitions-cutom.mp4" type="video/mp4">
+</video>
 
-  100% {
-    transform: translate3d(100%, 0, 0);
-  }
-}
+## Layouts transitions
 
-/* Layout  transition */
-.layout-enter-active {
-  animation: bounce-in 0.5s;
-}
+Nuxt sets `{ name: 'layout', mode: 'out-in' }` transition by default for all your [layouts](/guide/directory-structure/layouts).
+
+To start adding transition between your pages, add the following CSS to your [`app.vue`](/guide/directory-structure/app):
+
+::code-group
+
+```html [app.vue]
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
 
+<style>
+.layout-enter-active,
 .layout-leave-active {
-  animation: bounce-in 0.5s reverse;
+  transition: all 0.4s;
 }
+.layout-enter-from,
+.layout-leave-to {
+  filter: grayscale(1);
+}
+</style>
+```
 
-@keyframes bounce-in {
-  0% {
-    transform: scale(0);
-  }
+```html [layouts/default.vue]
+<template>
+  <div>
+    <pre>default layout</pre>
+    <slot />
+  </div>
+</template>
 
-  50% {
-    transform: scale(1.25);
-  }
+<style scoped>
+div {
+  background-color: lightgreen;
+}
+</style>
+```
 
-  100% {
-    transform: scale(1);
-  }
+```html [layouts/orange.vue]
+<template>
+  <div>
+    <pre>orange layout</pre>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+div {
+  background-color: #eebb90;
+  padding: 20px;
+  height: 100vh;
 }
+</style>
+```
+
+```html [pages/index.vue]
+<template>
+  <div>
+    <h1>Home page</h1>
+    <NuxtLink to="/about">About page</NuxtLink>
+  </div>
+</template>
+```
+
+```html [pages/about.vue]
+<template>
+  <div>
+    <h1>About page</h1>
+    <NuxtLink to="/">Home page</NuxtLink>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: 'orange'
+})
+</script>
 ```
 
 ::
 
-You can customize these default transition names globally using `nuxt.config`. Both `pageTransition` and `layoutTransition` keys accept [`TransitionProps`](https://vuejs.org/api/built-in-components.html#transition) as JSON serializable values where you can pass the `name`, `mode` and other valid transition-props of the custom CSS transition.
+This produces the following result when navigating between pages:
+
+<video controls class="rounded">
+  <source src="https://res.cloudinary.com/nuxt/video/upload/v1665065289/nuxt3/nuxt3-layouts-transitions_c9hwlx.mp4" type="video/mp4">
+</video>
+
+Similar to `pageTransition`, you can apply a custom `layoutTransition` to the page component using `definePageMeta`:
+
+```vue [pages/about.vue]
+<script setup lang="ts">
+definePageMeta({
+  layout: 'orange',
+  layoutTransition: {
+    name: 'slide-in'
+  }
+})
+</script>
+```
+
+## Global settings
+
+You can customize these default transition names globally using `nuxt.config`.
+
+Both `pageTransition` and `layoutTransition` keys accept [`TransitionProps`](https://vuejs.org/api/built-in-components.html#transition) as JSON serializable values where you can pass the `name`, `mode` and other valid transition-props of the custom CSS transition.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -123,43 +223,48 @@ export default defineNuxtConfig({
 })
 ```
 
-If you do modify the page Transition `name`, you will also have to rename the CSS classes accordingly.
-
-::alert{type="warning"}
-These globally defined page and layout transitions can be overridden with `definePageMeta` on an individual page.
+::alert{type="info"}
+If you change the `name` property, you also have to rename the CSS classes accordingly.
 ::
 
-### Override Global Transition
-
-`definePageMeta` is used to define page or layout transitions for a single Nuxt page and override any page or layout transitions that are defined globally in `nuxt.config` file.
+To override the global transition property, use the `definePageMeta` to define page or layout transitions for a single Nuxt page and override any page or layout transitions that are defined globally in `nuxt.config` file.
 
 ```vue [pages/some-page.vue]
 <script setup lang="ts">
-  definePageMeta({
-    pageTransition: {
-      name: 'bounce',
-      mode: 'out-in' // default
-    }
+definePageMeta({
+  pageTransition: {
+    name: 'bounce',
+    mode: 'out-in' // default
+  }
 })
 </script>
 ```
 
 ## Disable Transitions
 
-`pageTransition` and `layoutTransition` can be disabled for a specific route if required.
+`pageTransition` and `layoutTransition` can be disabled for a specific route:
 
 ```vue [pages/some-page.vue]
 <script setup lang="ts">
-  definePageMeta({
-    pageTransition: false
-    layoutTransition: false
+definePageMeta({
+  pageTransition: false
+  layoutTransition: false
 })
 </script>
 ```
 
+Or globally in the `nuxt.config`:
+
+```ts [nuxt.config.ts]
+defineNuxtConfig({
+  pageTransition: false,
+  layoutTransition: false
+})
+```
+
 ## JavaScript Hooks
 
-For advanced use-cases, you can use JavaScript hooks to create highly dynamic and custom transitions for your Nuxt routes.
+For advanced use-cases, you can use JavaScript hooks to create highly dynamic and custom transitions for your Nuxt pages.
 
 This way presents perfect use-cases for JavaScript animation libraries such as [GSAP](https://greensock.com/gsap/) or [Tween.js](https://createjs.com/tweenjs).
 
@@ -185,63 +290,79 @@ Learn more about additional [JavaScript hooks](https://vuejs.org/guide/built-ins
 
 ## Dynamic Transitions
 
-After disabling the default `pageTransition: false`, you can apply dynamic transitions using conditional logic to assign dynamic transitions directly to `to.meta.pageTransition` on your Nuxt pages.
-
-This example also uses the pre-configured animation library, [Animate.css](https://animate.style/).
+To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/guide/directory-structure/middleware) to assign a different transition name to `to.meta.pageTransition`.
 
 ::code-group
 
-```vue [pages/some-page.vue]
-<script setup lang="ts">
-const Router = useRouter()
-onMounted(async () => {
-  Router.afterEach((to, from) => {
-    to.meta.pageTransition = +to.params.slug < +from.params.slug
-    ? {
-      name: 'a',
-      mode: 'out-in',
-      appearActiveClass: "animate__animated animate__slideInRight",
-      enterActiveClass: "animate__animated animate__slideInRight",
-      leaveActiveClass: "animate__animated animate__slideOut",
-      duration: 500,
-    }
-    : {
-      name: 'a',
-      mode: 'out-in',
-      appearActiveClass: "animate__animated animate__slideInRight",
-      enterActiveClass: "animate__animated animate__slideInLeft",
-      leaveActiveClass: "animate__animated animate__slideOut",
-      duration: 500,
-    }
-  })
-})
-
+```html [pages/[id].vue]
+<script setup>
 definePageMeta({
-  pageTransition: false,
+  pageTransition: {
+    name: 'slide-right',
+    mode: 'out-in'
+  },
+  middleware (to, from) {
+    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>
 ```
 
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  app: {
-    head: {
-      link: [
-        {
-          rel: "stylesheet",
-          href: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
-        }
-      ]
-    }
-  }
-})
+```html [layouts/default.vue]
+<template>
+  <div>
+    <slot />
+    <div v-if="$route.params.id">
+      <NuxtLink :to="prev">⬅️</NuxtLink> | 
+      <NuxtLink :to="next">➡️</NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const id = computed(() => Number(route.params.id || 1))
+const prev = computed(() => '/' + (id.value - 1))
+const next = computed(() => '/' + (id.value + 1))
+</script>
 ```
 
 ::
 
-::alert{type="info"}
-Learn more about additional props to customize [transition classes](https://vuejs.org/api/built-in-components.html#transition) in the `Transition` component.
-::
+The page now applies the `slide-left` transition when going to the next id and `slide-right` for the previous:
+
+<video controls class="rounded">
+  <source src="https://res.cloudinary.com/nuxt/video/upload/v1665069410/nuxt3/nuxt-dynamic-page-transitions.mp4" type="video/mp4">
+</video>
 
 ## Transition with NuxtPage
 

From c1037fd22a968b299d73e4bfafaccd93d788eb76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Thu, 6 Oct 2022 17:35:00 +0200
Subject: [PATCH 6/6] update

---
 .../1.getting-started/5.transitions.md        | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/docs/content/1.getting-started/5.transitions.md b/docs/content/1.getting-started/5.transitions.md
index 848c96e2b7e..b6bf5bbdf47 100644
--- a/docs/content/1.getting-started/5.transitions.md
+++ b/docs/content/1.getting-started/5.transitions.md
@@ -1,6 +1,6 @@
 ---
 navigation.icon: uil:moon-eclipse
-description: Nuxt uses the Transition component under the hood to apply page transitions between routes.
+description: Nuxt leverages Vue's Transition component to apply transitions between pages and layouts.
 ---
 
 # Transitions
@@ -169,18 +169,18 @@ div {
 ```
 
 ```html [pages/about.vue]
+<script setup lang="ts">
+definePageMeta({
+  layout: 'orange'
+})
+</script>
+
 <template>
   <div>
     <h1>About page</h1>
     <NuxtLink to="/">Home page</NuxtLink>
   </div>
 </template>
-
-<script setup>
-definePageMeta({
-  layout: 'orange'
-})
-</script>
 ```
 
 ::
@@ -295,7 +295,7 @@ To apply dynamic transitions using conditional logic, you can leverage inline [m
 ::code-group
 
 ```html [pages/[id].vue]
-<script setup>
+<script setup lang="ts">
 definePageMeta({
   pageTransition: {
     name: 'slide-right',
@@ -338,6 +338,13 @@ definePageMeta({
 ```
 
 ```html [layouts/default.vue]
+<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 />
@@ -347,13 +354,6 @@ definePageMeta({
     </div>
   </div>
 </template>
-
-<script setup>
-const route = useRoute()
-const id = computed(() => Number(route.params.id || 1))
-const prev = computed(() => '/' + (id.value - 1))
-const next = computed(() => '/' + (id.value + 1))
-</script>
 ```
 
 ::