Delay on v-if="false"

[cirience-zz]

Hello,

I don't know wheather is it a bug or a feature. I decided to open an issue for this. Please forgive me, if my opened issue is not accurate.

I'm experiencing an little delay when I'm hiding an element with the v-if="false" tag. I'm providing an gif for you.

My template source-code follows, so you can understand how the bug came off.

<div class="i18n_picker">
   <div class="i18n_icon" v-on:click="i18nListVisible = !i18nListVisible">
      <animated-group-bounce-in tag="div">
         <img :key="returnLocaleInfo[activeLocale].langcode" :src="returnLocaleInfo[activeLocale].flag" :alt="returnLocaleInfo[activeLocale].langname"/>
      </animated-group-bounce-in>
      <i class="material-icons langarrow">keyboard_arrow_down</i>
   </div>
   <animated-flip-in-x>
      <ul v-if="i18nListVisible">
         <li :key="localeInfoItem.langcode" v-for="localeInfoItem in returnInactiveLocaleInfo">
            <div class="flag_container" v-on:click="changeLocale(localeInfoItem.langcode)"><img :src="localeInfoItem.flag" :alt="localeInfoItem.langname"/></div>
         </li>
      </ul>
   </animated-flip-in-x>
</div>

And the method to hide the picker

methods: {
    changeLocale: function (locale) {
      this.i18nListVisible = !this.i18nListVisible
      this.$locale.change(locale)
    }
  }

[dragonautdev]

Hey @SHA-256

Thanks a lot for using this plugin!

I believe the delay might not be caused by the plugin itself, but the combination of v-if, animate.css' default animations delay and whatever events setting this.$locale triggers.

Let me ellaborate a bit on that:

• Setting v-if=false is a resource-consuming operation since it removes the element from the DOM.
• Animate.css animations are pure CSS animations, so the browser might give them a low priority in the graphic pipeline.
• Depending on the i18n library you're using, operations performed by it have to conclude before the next rendering cycle can happen, thus causing a more notorious delay.

A few things to try before we confirm it's a bug on the plugin or something related to the above:

1. Use v-show instead of v-if, as it's more lightweight (it just sets the element's visibility).
2. Please remove the this.$locale.change... invocation in your click handler so we can discard the delay is related to events/actions triggered by it.

Please let me know how things go after making those changes and don't hesitate asking any questions you need!

[cirience-zz]

Everything is working fine now. Thank you very much for your detailed answer.