Version

3.2.20

Reproduction link

codepen.io

Steps to reproduce

click changeStyle

What is expected?

style change and should keep element style "display: none;" attribute via v-show

What is actually happening?

The element is displayed even if v-show value is false.

causes by commit 3f38d599f5aacdd3eeaa9475251a24f74e7ae3b4 . I understand it should be v-show control display and hide, computed style control display style.

I found a testcase in vShow.spec.ts name the value of 'display' set by v-show should not be overwritten by the style attribute when updated, So the issue https://github.com/vuejs/vue-next/issues/4768 is not a bug, it is designed like this.

or we can fix it simply like https://github.com/iBelieveLove/vue-next/commit/42396db868d34f9525ec3cc28779d10691dd5583

Yes I found the same. We could consider saving and re-setting any pre-existing transform. but that would possibly mean that the transform is jumping into action, not transitioning.

So right now I'd rather think we should document this and recommend to keep transitions in classes, not style on transitioned elements

Yes I found the same. We could consider saving and re-setting any pre-existing transform. but that would possibly mean that the transform is jumping into action, not transitioning.

So right now I'd rather think we should document this and recommend to keep transitions in classes, not style on transitioned elements

do you mean https://github.com/vuejs/vue-next/issues/4759 ?

Oh right I confused these two issues. Seeing you have an idea how to solve #4759, we'll look at that.

I'll hide the misleading comments here.

I guess you can try type like fullStyle: "'display: none'" The case we use the bind signature - :style instead of a html attr style => it should be the 'string' i.e. "'string'"

style

Yeah i know this, but we are talking about why the code behaves differently when written in different ways, right?