Vue: Transition mode not working with v-show

[voidgraphics]

Version

2.3.3

Reproduction link

https://codepen.io/anon/pen/XaMWYY

Steps to reproduce

• Have a transition element with a specific mode (eg "out-in")
• Have multiple elements to transition between with a v-show directive instead of v-if

What is expected?

The elements with v-show should transition properly and respect the specified transition mode

What is actually happening?

The initial element animates, then the one that is meant to replace it never appears.

---

I ran into this while making part of a form.
I can not use v-if since I need all of my form fields to stay within the HTML, so I can use them in my back-end on form submit.

I'm probably just misunderstanding something, but I have found nothing through the repo's issues and Google. Any help is greatly appreciated!

[posva]

Transition must have only one element (v-if allows that). Use the development version and you'll see the error

[Vue warn]: <transition> can only be used on a single element. Use <transition-group> for lists.

(found in <Root>)

[voidgraphics]

Thank you for the answer. I had seen the error in the console beforehand.
It seems like mode="out-in" does not work on transition-group.
How would one achieve the desired effect then? Should I use the hooks and trigger my animations manually or is there a cleaner way?

[posva]

I'd personally just use v-if. transition-group doesn't seem to fit the use case. But please ask questions on the forums, Discord or SO.

[voidgraphics]

Thank you! Sorry for the inconvenience.

[posva]

no worries 🙂