[Feature Request] Animations on locale change

[JakubKoralewski]

The idea is to allow creating animations on locale changes. Right now if you click on a language the new text just snaps into place, but if you could somehow provide a function that would get ran on every locale change it would open doors to things previously unfathomable. Dramatic beginning...

I am not familiar with the codebase so take these suggestions with a grain of salt, but here's how I'd do it. I see two ways:

1. A global localeChanged hook

Would be useful for creating whole page animations.

Examples:

• Some particles falling in the color of the new locale's country flag colors.

The function hook should provide the new locale, but maybe someone finds use for the old locale too, so let's not rule that out.

2. A mutation function

For more intricate effects to somehow animate the specific HTMLElement/VNode the internationalized vue-i18n data sits on.

Examples:

• The old text slides down and the new one slides in from the top. (needs only CSS)

• Over the course of a few seconds, random letters keep changing slowly revealing the new text in a Matrix, h4x0r like feeling. (needs JavaScript handling)

You would be able to add CSS classes and let CSS transitions and animations do the work. Or maybe it would be even better if this was somehow integrated with transition or/and transition-group in Vue. However, maybe someone could find a different application for being able to inject their own logic on locale change, so this may not be the best idea. How I'd see it: the function will give you the VNode, old locale's value and new locale's value. You'll have to return a new value. Not sure how that would work with some asynchronous animations (like the Matrix one) that last for a longer period of time.

I don't know if I'd be embarrassed or happy if it turns out that this API is already provided.

[ekil1100]

Agree ! I was looking for the solution to animation the locale change, if there is a localeChange hook would be nice.

[you06]

Looking for locale change event and find this issue, great feature! watch the locale variable would be a solution, but not good

watch: {
  '$i18n.locale': function(newVal, oldVal) {
    console.log('locale change', newVal)
  }
}

[ipluser]

Looking for locale change event and find this issue, great feature! watch the locale variable would be a solution, but not good

watch: {
  '$i18n.locale': function(newVal, oldVal) {
    console.log('locale change', newVal)
  }
}

Not Vue file, how to listen for the locale change in normal javascript file.

[JakubKoralewski]

watch the locale variable would be a solution, but not good

watch: {
  '$i18n.locale': function(newVal, oldVal) {
    console.log('locale change', newVal)
  }
}

That's possible, but the idea for me was mostly being able to detect which nodes changed on locale change as well as having the option to intercept an incoming change for a particular node and react however you want enabling custom animations or built-in ones.

[HiHub-Online]

Where can I vote for an idea? There is a great lack of smoothness when changing the language.