<transition> doesn't work with v-show

[matthewma7]

Version

2.5.16

Reproduction link

https://jsfiddle.net/tucyeg82/

Steps to reproduce

Run the jsfiddle example

What is expected?

The documentation for says it works with v-show, but only with a single element

It is expected to works in a similar fashion as v-if like this

What is actually happening?

Error is thrown saying needs transition-group

[maxirozay]

It does work for me try to put 2 seconds to your transition to see it. But yes you can have only one element in the transition tag else you need to use transition-group that works the same way.

For your example you can bind the value to the element like:

<transition name="fade" mode="out-in">
  <p :key='flag'>{{ flag }}</p>
</transition>

or use v-if and v-else instead of v-show because the v-if can't render the 2 elements at the same time while v-show technically can (even if it's never going to happen with your condition).

[posva]

What @maxirozay said

[matthewma7]

Hi, @maxirozay, @posva

As it stated and observed, a is used with v-if, if no mode is specified, there is clearly a moment there is more than one element exists.

The place I am trying to use v-show is with two different custom components, not as simple as my example.
Using transition-group has an apparent drawback of layout clashing because the mode attribute is not supported.
The reason I am trying to use v-show is to use v-show to prevent the component from being destroyed to keep the component state. (I tried to use keep-alive, but seems keep-alive is not designed for my case)

So, does it make sense to have a feature request for support of with v-show?
Or do you have some other suggestion for my keep-alive needs?

Sincerely,

[posva]

I don't see why keep-alive wouldn't work but that would rather be a discussion on the forum or the discord server 😄
I'm sure you will find your way 😉

[matthewma7]

@posva Thank you 👍, I'll look into my case.