Nuxt•3mo ago

Page Transition doesn't work well

I'm making page transition in my project.I followed the Nuxt official doc.After I added css style in app.vue and I add related settings in nuxt.config.ts, when i' m click the link, although it faded, but the element did't come out, so it was an blank page.How I could fix it?

9 Replies

kapa.ai•3mo ago

Hi @Volatile. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like you’re experiencing an issue where the page transition fades out, but the new page content doesn’t appear, resulting in a blank page. This is a known issue that can occur in Nuxt when using page transitions, especially if the transition is not set up correctly or if there are issues with the appear flag. Here are some things to check and try, based on the official Nuxt documentation and related issues: 1. Check Your Transition CSS and Names
Make sure the transition name in your CSS matches the one set in your nuxt.config.ts. For example, if you use:

   // nuxt.config.ts
   export default defineNuxtConfig({
     app: {
       pageTransition: { name: 'page', mode: 'out-in' }
     }
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     app: {
       pageTransition: { name: 'page', mode: 'out-in' }
     }
   })

Your CSS in app.vue should use the .page- prefix:

   <style>
   .page-enter-active,
   .page-leave-active {
     transition: all 0.4s;
   }
   .page-enter-from,
   .page-leave-to {
     opacity: 0;
     filter: blur(1rem);
   }
   </style>

   <style>
   .page-enter-active,
   .page-leave-active {
     transition: all 0.4s;
   }
   .page-enter-from,
   .page-leave-to {
     opacity: 0;
     filter: blur(1rem);
   }
   </style>

If the names don’t match, the transition won’t apply correctly and may result in a blank page during navigation Transitions - Nuxt Docs. 2. Ensure You’re Using <NuxtPage /> Correctly Your app.vue should look like this:

   <template>
     <NuxtPage />
   </template>

   <template>
     <NuxtPage />
   </template>

If you’re using layouts, wrap <NuxtPage /> in <NuxtLayout> as needed Transitions - Nuxt Docs. 3. Known Issue with the appear Flag There is a known issue where the initial transition (on first load) does not appear, but subsequent transitions work. This is tracked in the Nuxt issue tracker and may be related to how Vue handles the appear flag in transitions. If this is your case, it may not be fully fixable until the underlying issue is resolved in Vue or Nuxt Nuxt3 - Transition appear Flag not working. 4. Check for Layout Transitions If you are changing layouts as well as pages, the pageTransition will not run. Instead, you should set a layoutTransition in your config and provide the corresponding CSS Transitions - Nuxt Docs. 5. Minimal Example Here’s a minimal working example:

   <!-- 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>

   <!-- 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>

   // nuxt.config.ts
   export default defineNuxtConfig({
     app: {
       pageTransition: { name: 'page', mode: 'out-in' }
     }
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     app: {
       pageTransition: { name: 'page', mode: 'out-in' }
     }
   })

If you have followed all these steps and still see a blank page, it may be due to the known issue with the transition appear flag, which is not fully resolved as of the latest Nuxt releases Nuxt3 - Transition appear Flag not working. Summary:
- Double-check your transition names and CSS. - Make sure you’re using <NuxtPage /> correctly. - Be aware of the known issue with the initial transition. - If you’re using layouts, configure layoutTransition as well. If the problem persists, consider sharing a minimal reproduction for further help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

VolatileOP•3mo ago

@kapa.ai each of your suggestion were employed, but none were worked.

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for clarifying that you have already tried the standard solutions. Based on the knowledge sources provided, there are a few known issues and edge cases with Nuxt page transitions that could explain the blank page behavior: 1. Single Root Element Requirement
Pages must have a single root element. If your page template has more than one root element or even an HTML comment at the root, the route will not render during client-side navigation, resulting in a blank page. Double-check your page files for this issue:

   <!-- This is correct -->
   <template>
     <div>
       Page content
     </div>
   </template>

   <!-- This will cause issues -->
   <template>
     <!-- Comment at root is problematic -->
     <div>Page content</div>
   </template>

   <!-- This is correct -->
   <template>
     <div>
       Page content
     </div>
   </template>

   <!-- This will cause issues -->
   <template>
     <!-- Comment at root is problematic -->
     <div>Page content</div>
   </template>

See Nuxt docs: pages must have a single root element 2. Known Issues with Transition Appear Flag
There is a documented issue where the initial transition does not appear, or transitions do not work as expected, due to the appear flag not functioning properly in Nuxt 3. This is a limitation tracked in the Nuxt issue tracker and may not have a complete fix yet. If your setup matches the docs and you still see a blank page, this could be the cause (Nuxt3 - Transition appear Flag not working). 3. Page Transitions and Layout Changes
If you are navigating between pages that use different layouts, the pageTransition will not run; instead, layoutTransition is used. If you have not defined a layoutTransition or the corresponding CSS, this can result in no transition or a blank page during navigation (Nuxt Transitions Guide). 4. Experimental Features or Bugs
There have been some bugs in recent Nuxt versions related to transitions, especially when using features like Suspense, async data, or experimental view transitions. If you are using these, you may encounter unexpected behavior (Github Issue: using useAsyncData will trigger onMounted twice). If all standard solutions and requirements are met and you still experience a blank page during transitions, it is likely due to one of these known issues or a bug in the current Nuxt version. The knowledge sources do not provide a definitive fix beyond these points. If possible, try: - Ensuring all pages have a single root element (no comments or multiple elements at the root). - Testing with a minimal reproduction (just one or two simple pages). - Checking if the issue persists after upgrading or downgrading Nuxt (some users reported regressions/fixes between versions). If the problem continues, you may need to wait for an upstream fix or provide a minimal reproduction to the Nuxt team for further investigation. I'm sorry, but the knowledge sources do not contain a guaranteed solution for your specific case beyond these checks and known issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

VolatileOP•3mo ago

@kapa.ai yes it works, my pages did't have a sigle root element

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm glad to hear that the issue is resolved! In Nuxt, each page component must have a single root element in its template. If a page has multiple root elements or even an HTML comment at the root level, it can cause the page not to render during client-side navigation, which leads to issues like blank pages during transitions. This requirement is clearly documented in the Nuxt docs:

Pages must have a single root element to allow route transitions between pages. HTML comments are considered elements as well.
This means that when the route is server-rendered, or statically generated, you will be able to see its contents correctly, but when you navigate towards that route during client-side navigation the transition between routes will fail and you'll see that the route will not be rendered.

See Nuxt docs: pages must have a single root element

Ensuring a single root element in every page template is essential for transitions and navigation to work correctly in Nuxt. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

VolatileOP•3mo ago

but now i have a questions: why the other element would be change?In this case, the span : Simplenote was also changed <script setup lang="ts"> const ap = ref() const hid =ref() function sleep(ms: number) { return new Promise(resolve => setTimeout(resolve, ms)); } onMounted(async ()=>{ let isDark = localStorage.getItem('isDark') if (isDark === 'true'){ document.documentElement.classList.toggle('dark') } await sleep(1200) ap.value.classList.toggle('hidden') hid.value.classList.toggle('opacity-0') await sleep(600) hid.value.classList.toggle('hidden') }) </script> <template> <div> <div ref="hid" class=" z-2 absolute w-screen h-screen flex justify-center items-center bg-zinc-500 transition duration-600 ease-in-out "> <div> <div class=" flex p-4"> <div style="animation-delay: -200ms;" class=" bg-zinc-700 w-[40px] h-[40px] m-2 rounded-full ball "></div> <div style="animation-delay: -100ms;" class=" bg-zinc-700 w-[40px] h-[40px] m-2 rounded-full ball "></div> <div class=" bg-zinc-700 w-[40px] h-[40px] m-2 rounded-full ball "></div> </div> </div> </div>  <div ref="ap" class="hidden h-screen w-screen dark:bg-zinc-600 bg-white transition duration-300 ease-in-out"> <NuxtPage /> </div> </div> </template> <style> .ball { animation:ball-pulse ease 0.7s infinite; } @keyframes ball-pulse { 0%, 60%, 100% { opacity: 1; transform: scale(1); } 30% { opacity: 0.1; transform: scale(0.01); } } </style> sorry. i put layout in pages....

Gaming

Programming

Page Transition doesn't work well

Did you find this page helpful?