Page transition broken with nuxt-i18n

therddlr
0
therddlr
commented 4 months ago

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

bug
0
appinteractive
6
appinteractive
commented 2 months ago

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

0
urbgimtam
0
urbgimtam
commented a month ago

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

0
lu40
0
lu40
commented 7 days ago

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

simplescreenrecorder-2019-02-09_22 40 42

The transition is copy-pasted from the original issue description. @thariddler I guess it's this 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.

0
Informations
Bug Report โ€ข Open
#c163 - Created 4 months ago