Nuxt•6mo ago

Transition layout creates white background flash

Hi, getting into transitions and facing a really weird thing : Basically i have two layouts (one for homepage) and when transitioning from custom to default layout I'd like active one to fade and revealing next page bellow it. I'm almost there but when vanishing the actual page doesn't reveal next one but a white blank page until the other appear. How to get ride of this white background ? Current css :

.layout-leave-active {
  transition: opacity 0.25s;
}

.layout-leave-to {
  opacity: 0;
}

.layout-leave-active {
  transition: opacity 0.25s;
}

.layout-leave-to {
  opacity: 0;
}

2 Replies

Anjjar•6mo ago

It's normal because you set opacity: 0 Here an example that might help you : https://stackblitz.com/edit/unordered-nested-routes

El JovialOP•6mo ago

Thank you Anjjar, unfortunatly this does make the white background less visible but it's still there, the opacity fading reveals a white background instead of revealing next page

Gaming

Programming

Transition layout creates white background flash