You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Set the transition tag to not rely on CSS with :css="false", as well as trigger on appear.
Add a v-show for an element inside the <transition> tag.
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. notdisplay: 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.
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?
Vue.js version
2.1.4
Reproduction Link
https://jsfiddle.net/acies/6x2g6v02/
Steps to reproduce
<transition>
tag.:css="false"
, as well as trigger onappear
.v-show
for an element inside the<transition>
tag.@enter
callback for the transition, and calldone
inside the callback.What is Expected?
The element toggled with
v-show
is visually present (i.e. notdisplay: none
) when in the@enter
callback—even before the call todone
—just as it is withv-if
.What is actually happening?
Vue keeps (defers removal of)
display: none
until after@after-enter
.Callbacks for
v-if
andv-show
are thus not interchangeable.E.g.: starting an animation on
@enter
that relies on retrieving the global position of an element would work forv-if
, but fail forv-show
due to the lack of offsets/offset parents as a result ofdisplay: none
.Relevant:
vue/src/platforms/web/runtime/directives/show.js
Lines 31 to 32 in ae93d2b
The text was updated successfully, but these errors were encountered: