Nuxt.js: route transition stops working when switching layout

[uptownhr]

If you have multiple layouts for different routes, moving to a route with a different layout causes the route transition to stop working.

_{This question is available on Nuxt.js community (#c86)}

[Atinux]

Hi @uptownhr

Actually it's normal since the layout is different and the <nuxt></nuxt> component changed.

But you can handle layout transition for this case and disable the route transition to make the transition.

layouts/default.vue:

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

layouts/dark.vue:

<template>
  <transition name="layout" mode="out-in">
    <div class="dark">
      <nuxt/>
    </div>
  </transition>
</template>

Then, you need to have a global css file in assets/main.css:

.layout-enter-active, .layout-leave-to {
  transition: opacity .5s;
}
.layout-enter, .layout-leave-to {
  opacity: 0;
}

Make sure to set the CSS as global in nuxt.config.js:

module.exports = {
  css: ['~assets/main.css']
}

Result:

[jamiewilson]

I'm not sure if it would be worth it, but since there is a default .page-* transition applied to templates in /pages, it seems logical that there would be the same defaults available for /layouts with a .layout-* class. Just a thought!

[jamieweavis]

Since this is currently the first hit on Google for how to do layout transitions with Nuxt - they are now supported out of the box and the documentation can be found here: https://nuxtjs.org/api/configuration-transition/

They are used in the same way as page transitions, but with a layout prefixed class instead:

// Layout transitions
.layout-enter-active, .layout-leave-active {
  transition: opacity 0.5s;
}
.layout-enter, .layout-leave-active {
  opacity: 0;
}

// Page transitions
.page-enter-active, .page-leave-active {
  transition: opacity 0.5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}

[uptownhr]

Thanks

On Fri, Aug 31, 2018, 8:22 AM Jamie [e-mail] wrote:

Since this is currently the first hit on Google for how to do layout
transitions with Nuxt - they are now supported out of the box and the
documentation can be found here:
https://nuxtjs.org/api/configuration-transition/

They are used in the same was as page transitions, but with a layout
prefixed class instead:

// Layout transitions.layout-enter-active, .layout-leave-active {
transition: opacity 0.5s;
}.layout-enter, .layout-leave-active {
opacity: 0;
}

// Page transitions.page-enter-active, .page-leave-active {
transition: opacity 0.5s;
}.page-enter, .page-leave-to {
opacity: 0;
}

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/108#issuecomment-417698427, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AA-UttFV7TXVx0_U28Dvfw8RUmMTBL1Nks5uWVSygaJpZM4Ld_Bd
.

[ChrisRobston]

I was just looking this!

@jamiewilson but unfortunately mode doesn't not work so my transition to Error page broken.

I have

transition: {
    name: 'layout',
    mode: 'in-out'
  }

.layout-enter-active
  backface-visibility: hidden
  will-change: opacity
  opacity: 1
  transition: opacity 250ms linear

.layout-leave-active
  backface-visibility: hidden
  will-change: opacity
  opacity: 0
  transition: opacity 250ms linear

.layout-enter
  opacity: 0

Error page appears before previous page transitioned out. Changing modes doesn't do anything.

[ChrisRobston]

layoutTransition: 'layout'

Also not working. Looks like a bug, or Docs doesn't cover whole implementation.

[ChrisRobston]

@Atinux unfortunately wrapping both layouts into <transition name="layout" mode="out-in"> doesn't helping. Transition mode is broken - when I navigate from Error template to Default I see Default layout content appears before Error page transition

[ChrisRobston]

So resume: after 2 years this issues with layout exist, nobody still can provide a solution.

[ChrisRobston]

Here, the same issue I have - https://cmty.app/nuxt/nuxt.js/issues/c6875

So, transitions to Error layout is broken?

[DJafari]

@canyoudev first please don't spam, if you have anymore you can edit last comment

transition is only for pages, if you want change mode or name of layout transition, you must use layoutTransition

layoutTransition: {
  name: 'layout',
  mode: 'in-out'
}

@Atinux this is a mistake in document, please fix it
https://nuxtjs.org/api/configuration-transition

[cmty[bot]]

This question has been resolved by @jamieweavis, see answer.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.