Page transition broken with nuxt-i18n

therddlr
3
therddlr
commented 10 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 9 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 7 months ago

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

0
lu40
0
lu40
commented 7 months 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 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.

0
imShara
5
imShara
commented 6 months ago

@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
}
0
shrpne
10
shrpne
commented 16 days ago

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

0
shrpne
10
shrpne
commented 16 days ago

@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
0
studioscholz
0
studioscholz
commented 12 days ago

Also looking for a solution for this!

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