Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

@acies
Copy link

acies commented Dec 8, 2016

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:

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

@TheDutchCoder
Copy link

TheDutchCoder commented Dec 8, 2016

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants