Transitions between elements on different pages? | Nuxt | Page 1

#

Hi @lapis sky. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

In Nuxt, you have several options for implementing transitions between elements on different pages, but the approach is different from Svelte's automatic transitions.

Page and Layout Transitions

Nuxt provides built-in support for page transitions using Vue's <Transition> component. Here's how you can implement them:

1. Global Page Transitions

You can enable page transitions globally in your nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  },
})

Then add the corresponding CSS in your 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>

Transitions documentation provides more details on this approach.

2. Per-Page Transitions

You can define different transitions for specific pages using definePageMeta:

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'bounce',
    mode: 'out-in'
  }
})
</script>

3. Advanced Transitions with JavaScript Hooks

For more complex transitions between specific elements across pages, you can use JavaScript hooks:

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'custom-flip',
    mode: 'out-in',
    onBeforeEnter: (el) => {
      console.log('Before enter...')
    },
    onEnter: (el, done) => {
      // Your animation logic here
    },
    onAfterEnter: (el) => {}
  }
})
</script>

#

This approach is ideal for using animation libraries like GSAP to create more sophisticated transitions between elements on different pages, as mentioned in the JavaScript Hooks documentation.

4. View Transitions API (Experimental)

Nuxt also offers experimental support for the native browser View Transitions API, which can transition between unrelated elements on different pages:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  }
})

You can then enable or disable this per page:

<script setup lang="ts">
definePageMeta({
  viewTransition: true // or false
})
</script>

This is documented in the View Transitions API section.

Important Notes

When using <NuxtPage> with transitions, ensure your page has a single root element.
If you're changing layouts as well as pages, you'll need to set a layout transition instead of a page transition.
Unlike Svelte, Vue/Nuxt transitions require more explicit configuration through component props and CSS classes.

If you're having issues with your specific implementation, you might need to check that your transition CSS classes match the transition name you've defined, and that you're properly structuring your components with single root elements.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@lapis sky Kapa.ai is still learning and improving, please let me know how I did by reacting below.

#Transitions between elements on different pages?