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

Closed
acies opened this Issue Dec 8, 2016 · 1 comment

Projects

None yet

2 participants

@acies
acies commented Dec 8, 2016 edited

Vue.js version

2.1.4

Reproduction Link

https://jsfiddle.net/acies/6x2g6v02/

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: https://github.com/vuejs/vue/blob/ae93d2bef8e20402ae3501aa5cdcf14b0ee19c12/src/platforms/web/runtime/directives/show.js#L31-L32 ?

@TheDutchCoder
TheDutchCoder commented Dec 8, 2016 edited

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

1ms later it's correct: https://jsfiddle.net/6x2g6v02/2/

@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