I18n-module: 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[bot]]

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[bot]]

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[bot]]

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.

[quangvision]

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