0
Version
Reproduction link
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
0
0
@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 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
Author
Github
@thariddler could you provide a gif of the issue? That is the routing? (from > to)
Or did you solved it already?