Transition with JS hooks and v-show – `display: none` removed too late #4418

acies opened this Issue Dec 8, 2016 · 1 comment


None yet

2 participants

acies commented Dec 8, 2016 edited

Vue.js version


Reproduction Link

Steps to reproduce

  1. Create a <transition> tag.
  2. Set the transition tag to not rely on CSS with :css="false", as well as trigger on appear.
  3. Add a v-show for an element inside the <transition> tag.
  4. Add an @enter callback for the transition, and call done inside the callback.

What is Expected?

The element toggled with v-show is visually present (i.e. not display: none) when in the @enter callback—even before the call to done—just as it is with v-if.

What is actually happening?

Vue keeps (defers removal of) display: noneuntil after @after-enter.

Callbacks for v-if and v-show are thus not interchangeable.
E.g.: starting an animation on @enter that relies on retrieving the global position of an element would work for v-if, but fail for v-show due to the lack of offsets/offset parents as a result of display: none.

Relevant: ?

TheDutchCoder commented Dec 8, 2016 edited

The strange thing is that if you log $, then the display property is set to "", which is correct, yet $ reports "none". Could this be an issue where the afterEnter callback fires too early?

1ms later it's correct:

@yyx990803 yyx990803 closed this in 612d321 Dec 8, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment