v-bind in CSS values are set after the component's element is already in the DOM

[matej-svejda]

Vue version

3.4.35

Link to minimal reproduction

https://play.vuejs.org/#eNp9Ul1v2zAM/CuaXuoMrd2s20vmBFuLAtuAfaDLo4DBkZhErSMZEu2mCPLfR8pJZmxr3yTeiTrecSc/Nk3etSAnUrkSYdPUFcJMOSHKRYvonfiga6sfpkrGtX+88ZtGTMWr41nJ2dyvVjUIrgiEiEJT3TtwWBZ9i75detpd2OWglZKiILQsBj/TNepgGxQRsG2oYqlfQLETAZZiL5bBb4SSpFrJ9yc0tT9AecE3nkvRWNo7UjVQT22yZVVHGPHX/WfpY3kuMRJ9aVf5ffSOXNmxdiV5JltD+N6gpXZKTkRCGKvq2j9+STUMLZwf63oN+uE/9fu45ZqSPwJECB2JPGFYhRVgD9/+/AZbOp/AjTdtTewXwDuIvm5ZY0+7bp0h2QNeUvs5eWbdah5vtwguHodioczcJ34ymU17bvQ/cq/yt+mdcnty8Wg/GfhsmN599a1DMMdIz+jBGQXa59VUxpBAimt8ecnhnPhZNhLTGYtQaLxuN7Rq+cKbp5y0XBOH393Ulsp3oDGjlPd/Jz1cdYWlsV060HE9ns15iz9BxX3KggqJU/Skf3YVn3j7tW/AJOJ63EtTuPDBQJiIcbMVFIs1tHmGBmTsMN5E6KrWWXexsM5kh+JIvOY3owMVQ0UBsfmTkytvYgLJbhqLFdDX5PuvDgJnSb5TIPnVO7n/DVR7Vf8=

Steps to reproduce

Click on "Toggle show test component"

What is expected?

The component opens with padding set to 100 initially.

What is actually happening?

The padding is animated from 0 to 100.

System Info

No response

Any additional comments?

This happens because when the component is initially mounted, the v-bind variables aren't set yet. So if onMounted triggers a DOM layout recalculation, then the padding is set to 0, after which it is immediately set to 100, triggering the animation. This didn't happen in older versions (for example 3.4.21).

But there is a similar, probably related issue that happens 3.4.35 and in older versions like 3.4.21: in some cases (I was able to reproduce it using Teleport), mounted in directives can be executed after the component already exists in the DOM but before the v-bind variables are set. If mounted then triggers a DOM layout recalculation, the same animation issue can happen again. Here's the code to reproduce it.

Basically, it would make things a lot easier if there was a guarantee that the element isn't added to the dom before the v-bind values are set to their initial values.

[Procrustes5]

I found this PR. I think it's probably due to the impact of moving functionality to onMounted in this change.
Can I participate in solving this problem?

#8523

[edison1105]

@Procrustes5
PR welcome~

[matej-svejda]

Thank you for the quick turnaround 🙂 But this doesn't seem to fix the case with directives and Teleport for which I provided the example (this one). At least I can still reproduce the problem when I switch to the latest commit for the Vue version on SFC Playground.

[edison1105]

a workaround

mounted: el => {
    // lets recalculate the layout
    nextTick(()=>{
      console.log(el.getBoundingClientRect())
    })
  },

[matej-svejda]

@edison1105 Thanks, I'm aware of the workaround. It unfortunately doesn't work for my specific case.