Page transition broken with nuxt-i18n

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

<div align="right">_{This bug report is available on Nuxt community (#c163)}</div>

[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
}

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