Nuxt transition not working on diffents layouts

Question

I'm using Nuxt for my new website, and I create a CSS transition with page-enter-active class, but it's only working on the pages based on the default layout.

A simple demo of the problem : https://test-transition-layout.netlify.com/

When browsing from or to the home page (based on a different layout), there's no transition. But if you navigate from team page to about, you can see it.

The code of the demo : https://github.com/KevinFuret/test-template-transition

Thanks a lot for your help

Answer 1

You're very close! All you're missing are the classes for layoutTransitions in your CSS (https://nuxtjs.org/api/configuration-transition#the-layouttransition-property).

Nuxt separates the two because page transitions are more granular and may need more specific body adjustments between shared page layouts. As layout transitions happen at a higher/parent level than pages, the page transitions are dependent on their behavior.

Update to assets/main.css

.page-enter-active,
.page-leave-active,
.layout-enter-active, 
.layout-leave-active {
  transition: opacity .5s
}

.page-enter,
.page-leave-active,
.layout-enter, 
.layout-leave-active {
  opacity: 0
}

Demo: https://kevinfuret-test-template-transition.glitch.me/

Source: https://glitch.com/edit/#!/kevinfuret-test-template-transition