Vue: When v-if and v-show are used on the same element, leave transition does not occur when v-if changed to false

[weotch]

Vue.js version

2.1.3

Reproduction Link

http://codepen.io/weotch/pen/GNyWaV

Steps to reproduce

Go to that codepen and click both links for "show" and "if" to "yes". Toggle just "show" off, note the transition occurs. Toggle "show" back on and then toggle "if" off, note that there is no transition out.

What is Expected?

I expected to still see the box transition out. Or, in other words, anenter transition should trigger only if both v-show and v-if == true. And a leave transition should trigger only if either v-show or v-if != true.

What is actually happening?

If v-if == true and v-show changes from true to false, the leave transition occurs as expected. If v-show== true and v-if changes from true to false, the element is immediately removed, no transition occurs.

My use case for this is using both v-if and v-show around media (img, video). The v-if triggers a load to start and then, once they are loaded, the v-show triggers the element to be revealed.

[yyx990803]

v-if and v-show are not supposed to be used together for transition purposes, because they entail conflicting start/ending states. Regarding your use case: you can use the v-if on the outer <transition> component instead.

[weotch]

Appreciate the feedback and thanks for that suggestion.

[sky790312]

Can they use together now !? In Vue 2.x version.

[weotch]

@sky790312 the above was for Vue 2.x (2.1.3)

[sky790312]

Got it. Thanks!