v-show triggers transition every time value changes irrespective of the value's truthiness

[decademoon]

Version

2.5.13

Reproduction link

http://jsfiddle.net/df4Lnuw6/173/

Steps to reproduce

• Bind v-show to a non-boolean truthy value (such as a number or string).
• Periodically change the value to a different truthy value.
• v-show triggers the enter transition every time the value changes.

What is expected?

v-show should not do anything. The element's classes should not change.

What is actually happening?

v-show triggers the enter transition every time the value changes even though the value remains truthy.

This causes the element to momentarily have the v-enter and v-enter-active classes which triggers the CSS transition very briefly. This is especially noticeable in Safari.

---

v-show should check if !oldValue === !newValue (or Boolean(oldValue) === Boolean(newValue)) instead of oldValue === newValue to see if a transition should not occur.

See src/platforms/web/runtime/directives/show.js#L30.

A workaround is to bind only boolean values to v-show.

[dsonet]

But should v-show bind to a none boolean value?

[posva]

It's definitely something you do for convenience, exactly like using if (array.length) or if(myObject)