Vue: Transition class `leave-to` not removed if hidden element changes too fast with v-show

Created on 6 Mar 2018 · 5Comments · Source: vuejs/vue

Version

2.5.13

Reproduction link

https://jsfiddle.net/freakypie/nn2vwt7b/22/

Steps to reproduce

change a value in a vue really fast and the transition won't remove the leave-to class

What is expected?

the label should be shown

What is actually happening?

the label isn't shown

On my own app, i redirected to a page that was supposed to have no app header, but it then redirected to another page that did, but the header was missing anyway

bug

Source

freakypie

All 5 comments

As a workaround for the moment you can use a v-if instead of the v-show

posva on 6 Mar 2018

for the moment i just debounced it and used a local property

    async "$store.state.invisible"() {
      clearTimeout(this.__updateInvisible);
      this.__updateInvisible = setTimeout(() => {
        this.invisible = this.$store.state.invisible;
      }, 50);
    },

that works for me, i just wanted to let you know about the bug

freakypie on 6 Mar 2018

May be a dup of https://github.com/vuejs/vue/issues/5800 ?🤔

jkzing on 7 Mar 2018

Oh, yeah, I didn't even check the code to see it was a v-show because it's a transition-group so I was expecting it to only do a v-for. Seems related but may be caused by different things, so I think we can keep it open for the moment

posva on 7 Mar 2018

👍1

This has been fixed by #7391 (not released yet)