Page transition broken with nuxt-i18n

[thariddler]

Version

v5.3.0

Reproduction link

https://github.com

Steps to reproduce

I have simple fade page transition

.page-enter-active {
  backface-visibility: hidden;
  will-change: opacity;
  opacity: 1;
  transition: opacity 450ms linear;
}

.page-leave-active {
  backface-visibility: hidden;
  will-change: opacity;
  opacity: 1;
  transition: opacity 450ms linear;
}

.page-enter {
  opacity: 0;
}

.page-leave-active {
  opacity: 0;
}

The problem is, when I change locale, text content changes instantly while page transition is not complete.
In result I have a blink of content.

Is there'a a way to solve this?

What is expected ?

No blink, smooth transition

What is actually happening?

Transition broken, content blink

_{This bug report is available on Nuxt community (#c163)}

[appinteractive]

@thariddler could you provide a gif of the issue? That is the routing? (from > to)
Or did you solved it already?

[urbgimtam]

Any news on this? I'm suffering the same, and can't understand how to solve it.

[lu40]

@thariddler could you provide a gif of the issue? That is the routing? (from > to)
Or did you solved it already?

The transition is copy-pasted from the original issue description. @thariddler I guess this is the behaviour you were talking about?

---

For me the following workaround does the job:

// utils/page-transition.js

function stripLocale (name) {
  const routeNameSeperator = '__' // or whatever you set it to
  return name.substring(0, name.indexOf(routeNameSeperator))
}

export default function pageTransition (from, to) {
  const pageTransitionName = 'my-page-transition'
  if (!from || !to || !from.name || !to.name) return pageTransitionName
  return stripLocale(from.name) === stripLocale(to.name) ? '' : pageTransitionName
}


// pages/index.vue

import pageTransition from '~/utils/page-transition'
export default {
  transition: pageTransition
}

However this disables page transitions when switching the language instead of replacing the translated content smoothly while fading back in.

[imShara]

@lu40 thanks, but returning transition name should not be empty '' becouse it will be replaced to default. Should return any character, e.g:

export default function pageTransition (from, to) {
  const pageTransitionName = 'my-page-transition'
  if (!from || !to || !from.name || !to.name) return pageTransitionName
  return stripLocale(from.name) === stripLocale(to.name) ? '-' : pageTransitionName
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[shrpne]

The still occurs in the latest version 6.0.0
I think it should be reopeed

[shrpne]

@paulgv in the #129 you asked for a real-life use case, this issue is it :)

Also workaround from @lu40 don't work very well:

• it require to tweak every page
• blink occur when page component is replaced, because i18n.locale change and page replacement occurs in different times

[robinscholz]

Also looking for a solution for this!

[lopermo]

Also waiting for a fix!

[rchl]

Locale is changed when nuxt runs module's middleware. And it runs right away on triggering route change. Same for routeChanged event.

I'm not sure what approach could be used to fix it. Hook into page transitions maybe but that sounds a bit brittle. Maybe @pimlie or @pi0 can think of something.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[souljorje]

Looking 4 solution too!

[dennisgeerts]

Is there already a solution to this?

[bachellerieloic]

Same here, looking for a solution... It's pretty ugly.

[rchl]

I don't think there is generic solution that could be applied here.

No matter when we switch the locales, there is always gonna be a jarring text change if you are using transition that fades out the old page and fades in a new page. No matter if we switch locales at the beginning or end of the transition.

[quangnhattran]

This issue is really bothering me. Hopefully someone could come up with a complete solution for this.

[rchl]

Actually, it should be possible to do something here but maybe would need something added in Nuxt.

VueRouter knows when the route is about to change after transition so we could hook into that, potentially.

[rchl]

Actually when page component actually switches is only known at the page component level (beforeRouteLeave option) and at router-view level (either through watching $route or the leave event of the transition). It's not that easy or robust to hook into those...

[jorisnoo]

Adding localised parts to data() and setting their value according to the current locale in created() seems to work — but would get quite annoying if there are many.

        async asyncData ({ $content }) {
            return {
                info: {
                    en: await $content('en/index').fetch(),
                    de: await $content('de/index').fetch(),
                    jp: await $content('jp/index').fetch(),
                },
            };
        },
        data () {
            return {
                body: null,
            };
        },
        created () {
            this.body = this.info[this.$i18n.locale];
        },

[MartinMa]

The problem is that page-enter and page-leave are not necessarily strictly sequential. Think of a slider animation. The old site slides out to the left and the new one slides in from the right at the same time. So both sites and both languages are visible at the same time. So we basically need to freeze the translation on the old site while the page-leave animation is running.

@jorisnoo That's what you are suggesting? Grabbing a clone of the translation on created() and use that in the page component?

[IlanVivanco]

Facing the same issue here.
Maybe adding some sort of custom delay before the lang switch would help to adjust it to the transition.

[pmrotule]

Same here. The only solution I found was to use a good old <a> tag to do a full page reload when switching the language, but obviously, I would love to avoid it...

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[MartinMa]

Please don't close. It's still an issue.

[tiretdusix]

Hello !

Adding my support on this. I also would like this fixed.

Maybe the local change happens to early ?
Looks like the locale is set as soon as i do this.$router.push(this.switchLocalePath(locale)). It immediately blinks into the new locale - and then plays the page transition;

Could it be possible to set the new locale after first page unmounted, and before next page renders ?

[pmrotule]

Could it be possible to set the new locale after first page unmounted, and before next page renders ?

@tiretdusix Not possible at the moment. You'll be able to do it only once my PR fixing this issue gets merged: #963

[AgustinBanchio]

Any update on this? I see there are some conflicts on that PR plus no more comments from the repo's maintainers

[rchl]

Solution for that released in https://github.com/nuxt-community/i18n-module/releases/tag/v6.20.0. Thanks to @pmrotule .

[Venegrad]

my version ^7.2.0 and still not fixed yet... Any solutions?

[bitmonti]

my version ^7.2.0 and still not fixed yet... Any solutions?

I know that this is an ugly fix and you have to do it in every component as well, but at least it removed the page-leave-flicker for me.

<template>
  <section ref="ARTIFAC">
     <p>This flicker made me crazy!</p>
  </section>
</template>

<script setup>
// HACK TO REMOVE PAGE ARTIFACS ON SCROLLBEHAVIOUR
const ARTIFAC = ref(false);
onBeforeUnmount(() => ARTIFAC.value.classList.add('opacity-0'));
</script>

...and in my css I removed "leave-active"

.appear-enter-active {
  transition: opacity var(--timing-appear);
}

.appear-enter-from,
.appear-leave-to {
  opacity: 0;
}

[pmrotule]

my version ^7.2.0 and still not fixed yet... Any solutions?

@Venegrad You need to go over a few extra steps to fix that issue as it cannot be fully fixed by nuxt-i18n (for more details, check my PR #963 introducing the solution). Those extra steps are documented here: https://i18n.nuxtjs.org/lang-switcher/#wait-for-page-transition

[bitmonti]

Try key in nuxt layouts.

<NuxtPage :page-key="route.fullPath" />

or either

<main :key="route.fullPath">
  <slot></slot>
</main>

[Venegrad]

my version ^7.2.0 and still not fixed yet... Any solutions?

@Venegrad You need to go over a few extra steps to fix that issue as it cannot be fully fixed by nuxt-i18n (for more details, check my PR #963 introducing the solution). Those extra steps are documented here: https://i18n.nuxtjs.org/lang-switcher/#wait-for-page-transition

Not working

[FarzinMoha]

when I navigate to "/profile" from "/" and then click to change language, route changes to "it/profile" and then when I click on back button: <Button @click="router.back()" :noBg="true">{{ t('back') }} the page doesn't navigate to "/it" it just back to "/profile"

I want when in homepage I navigate to "/profile" and then click to change language the route changes to "it/profile" and then when I click on back button it navigate to "/it/"