Transition - UI not updated during transition process

[zaalbarxx]

Vue version

3.5.12

Link to minimal reproduction

https://play.vuejs.org/#eNqFVFFv0zAQ/is3v7ST2m7dVoRKVsHQJOABECAQkl/c9NJ5dWzLdrKWqv+dc5ymG2PbSxTffd93d58v2bJ31o7qCtmUZT530gbwGCo741qW1rgAW3BYwA4KZ0roEbTHNde50T5A6ZdwGfP93gdUysAv49TiqHf8Zo/wN+buM65DCyuE8njIBsr8FKrCvcr47Lwhc11UOg/SaNCE6R/Dlmvo1EZ1SwquQoLDQalL9S4mr3qU2z1Qm4t89aRa091TcrG1JJedJKfIIzoELK0SAekE0HCmsN12AjsiAGQLWRMgC05oL9NcosRLzgL6wBmUZhFPpgpDqeksrEXhGk1ieys01ENZEORo3zahVrihyBwL45Cz2YOykM2rEKhQ2NgonU5Eepsrma8okpwlXlTLThJgRtNRtX8qIxnTVoss4qQ8IV6qkhx/1N0VhbuabbFD5ezk4FQbSA4CRP/veZ75sFHxZRSdHKIO6IaCLrvGdMt0mZ3UFIRSMPGAwuOQzN7vRyIrFDW+TM6rucyHc/wj0fXHAzgdTeLj9QDGcXcfCQazFzNW5DJspnDabFmrTrdXTtNrHOp3/+zUrlsl8qSZjw1Y8PTRFHI5uvVG0/faaHKWm9JKhe6LjU16zmj9kjhn1LC5+9TE4pcy2MfzG8xX/4nf+nWMcfbVoUdX01J1uSDcEunmY/r6e1rALknrWylCP5P8ht6oKvaYYFeVXlDb93BNtx+bv47Uyx/+eh2QvG+Hio1G5K7Bc0Z/ovfPjH5o93x00fDIT7b7C8ffq1M=

Steps to reproduce

Click on the button and watch the outcome

What is expected?

I would expect text to change inside the tag, just as it changes above the button.

What is actually happening?

For some reason the transition prevents the UI from being updated upon changes to the state. Not sure if this is expected or not (could not find any details on this in the docs).

The whole thing could obviously be mitigated in other ways, like using setTimeout with intermediate variable etc, but I am curious if this is a bug or intended behavior, maybe it has to do with some sort of optimizations to the rendering process etc ?

Even made a quick check for "native" transitions/animations and it works without problem, so I assume this is something related to Vue itself ?
https://codepen.io/zaalbarxx/pen/PwYQzXa?editors=1111

System Info

Windows 11, Chrome 131.

Any additional comments?

No response

[edison1105]

This is by design. For Transition triggered by v-if, there will be no patch when the element leaves.

<Transition> for applying animations when an element or component is entering and leaving the DOM.

The elements inside Transition enter and leave when showNext changes.

codepen.io/zaalbarxx/pen/PwYQzXa?editors=1111
this example is not the same as Transition, the <div> does not enter or leave when you click it, so there is no animation.

[zaalbarxx]

@edison1105

Ok, I created some example more in line with the behavior I'd expect. It is here:
https://codepen.io/zaalbarxx/pen/KKbNwOG

I'm still not quite sure how the statement above

for applying animations when an element or component is entering and leaving the DOM.
actually exclude the behavior I expect.

I've event created similiar example using ReactJS:
https://stackblitz.com/edit/vitejs-vite-y49udcv1?file=src%2FApp.tsx,package.json&terminal=dev

I mean, is there an actual reason why Vue would not want this to behave like this ? I don't see any drawback of such thing and it would add a little bit of flexibility regarding transitions/animations without relying on JS and intermediate variables to apply between the transition.

Also the docs never explicitly says that element being transitioned is unable to be updated.

[edison1105]

I mean, is there an actual reason why Vue would not want this to behave like this ? I don't see any drawback of such thing and it would add a little bit of flexibility regarding transitions/animations without relying on JS and intermediate variables to apply between the transition.

This design might be intended to:

• ensure smooth animation
• prevent unnatural or flickering animation if the internal state is changed during the animation
• maintain state until the animation ends to ensure the continuity of the transition effect

Your React example is more like using the v-show not v-if, see Playground
Or you can use CSS animations directly, see Playground

[zaalbarxx]

Here is the React example which does exacly the same, unmounting the actual node from the DOM, but still allowing to change the DOM in the middle of transition.
https://stackblitz.com/edit/vitejs-vite-y49udcv1?file=src%2FApp.tsx,package.json&terminal=dev

You say that it might work that way on purpose, but I don't see a good reason why would it ? I would imagine that changing that could theoretically be a breaking change, but there could be some prop on Transition component which would control this (but I still believe that it should be "enabled" by default).

Of course it is not a major issue, but at the other hand, isn't the library supposed to make our lifes easier, also shouldn't it be up to developer to actually control such things by himself ?

Also I don't quite understand why this one has been closed without any further discussion, I consider it a bit rude, like, no specific argument was given besides of

That's the expected behavior.

Svelte has similar issue on its tracker:
sveltejs/svelte#6479 (implementation https://stackblitz.com/edit/vitejs-vite-txewg68p?file=src%2FApp.svelte&terminal=dev)

[zaalbarxx]

My proposition is to create a flag which would explicitly allow mutation of the DOM, this way it would be backward compatible with existing behavior (I guess it could potentially break some animations). Same thing was proposed in Svelte issue. Could be something like trackChangesDuringTransition with default of false.