N
Nuxt•3d ago
Flinty

Transitions prevent render

Riddle me this folks, I have: 
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: [
    "/assets/css/main.css",
  ],
  modules: [
    "@nuxtjs/color-mode",
    "nuxt-mapbox",
    "@nuxtjs/robots",
    "reka-ui/nuxt",
    "@pinia/nuxt",
    "@nuxtjs/i18n",
  ],

  app: {
    pageTransition: { name: "page", mode: "out-in" },
    layoutTransition: { name: "layout", mode: "out-in" },
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  css: [
    "/assets/css/main.css",
  ],
  modules: [
    "@nuxtjs/color-mode",
    "nuxt-mapbox",
    "@nuxtjs/robots",
    "reka-ui/nuxt",
    "@pinia/nuxt",
    "@nuxtjs/i18n",
  ],

  app: {
    pageTransition: { name: "page", mode: "out-in" },
    layoutTransition: { name: "layout", mode: "out-in" },
When I navigate from /my-page to /my-page/1 it all goes fine. When I navigate back to /my-page, my page fails to render, however, all of my HTTP calls are triggered, images are loaded etc - but entirely invisible. When I remove pageTransition and layoutTransition - everything works as expected. Here are the transition effects: 
.page-enter-active,
.page-leave-active {
    transition: all 0.1s;
}
.page-enter-from,
.page-leave-to {
    opacity: 0;
    filter: blur(1rem);
}

.layout-enter-active,
.layout-leave-active {
    transition: all 0.1s;
}
.layout-enter-from,
.layout-leave-to {
    filter: grayscale(1);
}
.page-enter-active,
.page-leave-active {
    transition: all 0.1s;
}
.page-enter-from,
.page-leave-to {
    opacity: 0;
    filter: blur(1rem);
}

.layout-enter-active,
.layout-leave-active {
    transition: all 0.1s;
}
.layout-enter-from,
.layout-leave-to {
    filter: grayscale(1);
}
Any thoughts?
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @Flinty. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information in the knowledge sources, your issue—where enabling both page and layout transitions causes the page to become invisible after navigating back, despite HTTP calls and image loads—appears related to how Nuxt handles transitions, especially when switching between layouts or pages with transitions enabled. Several related issues and fixes have been discussed in the Nuxt repository: 1. Transition State Not Reset: There was a bug where the internal transition state (nuxtApp._runningTransition) was not properly reset when navigating between a page with a transition and one without, which could cause rendering issues. This was fixed by ensuring the transition state is cleared on resolve, so transitions don't get "stuck" and prevent rendering. If you're on a version before this fix, you might encounter symptoms similar to what you describe. Make sure your Nuxt version includes this fix (fix: delete nuxtApp._runningTransition onResolve). 2. Scroll and Transition Synchronization: There have been issues where scroll behavior and transitions were not properly synchronized, especially when using top-level await or async setup in pages. This could affect the timing of transitions and potentially cause rendering glitches. A fix was introduced to better align scroll behavior with transition completion (align scroll behavior with page transition completion). 3. Layout Transitions and Disabling Layouts: Disabling a layout (e.g., with definePageMeta({ layout: false })) can disable its transition, which may cause unexpected behavior. The recommended workaround is to use a "blank" layout instead of disabling the layout entirely, so transitions remain consistent (Transition Issue with Layout in Nuxt 3). 4. General Transition Bugs: There have been several fixes related to transitions, including ensuring that transitions only run on the client side and that scroll-to-top works after both page and layout transitions (allow scroll to top after layout and page transitions, enable Transition component only on client side). What you can try: - Ensure you are using the latest Nuxt 3 version, as several transition-related bugs have been fixed recently. - If you are conditionally disabling layouts, use a "blank" layout instead of layout: false to maintain transition consistency. - Double-check your transition CSS: if a transition leaves an element with opacity: 0 or a heavy filter and the transition does not complete or the state is not reset, the element may remain invisible. - If the issue persists, try to create a minimal reproduction and check if the problem occurs with only the transition settings and minimal content. This can help isolate whether the issue is with your specific setup or a Nuxt bug. If after updating and trying the above, the issue still occurs, it may be a regression or edge case not yet addressed. In that case, providing a minimal reproduction (as suggested in the Nuxt issue template) will help the Nuxt team investigate further. References: - fix: delete nuxtApp._runningTransition onResolve - align scroll behavior with page transition completion - Transition Issue with Layout in Nuxt 3 - allow scroll to top after layout and page transitions - enable Transition component only on client side If you need more targeted help, please provide a minimal reproduction using StackBlitz or CodeSandbox as recommended in the Nuxt community guidelines. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@332515677585801218> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?