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

[acies]

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:

vue/src/platforms/web/runtime/directives/show.js

Lines 31 to 32 in ae93d2b

	enter(vnode)
	el.style.display = el.__vOriginalDisplay

?

[TheDutchCoder]

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/