`<Transition>`: More weird behavior

[tsxoxo]

Vue version

3.2.37

Link to minimal reproduction

Vue Playground

Steps to reproduce

• Go to the first playground example of the Transition Guide
• Try using transform: translateY(100px) or transform: scale(2) translateY(100px) as .v-enter-from, .v-leave-to

What is expected?

The element should smoothly move down in a straight line (and scale, if that is used) and stay visible at the end of the animation

What is actually happening?

These odd behaviors all occur when using a single transform: translateY(100px) as .v-enter-from, .v-leave-to

• Inline elements not animating (span)
• Element abruptly disappearing at the end of animation
• (This one occurs when chaining transforms transform: scale(2) translateY(100px)) Element veers to the left to varying degrees (seemingly by changing display CSS property of container element)

Demo

Vue playground Transform demo.webm

System Info

MacOS 11.6
Chrome: Version 103.0.5060.134 (Official Build) (x86_64)

Any additional comments?

Really wish this would work

[Zippowxk]

<span v-if="show" style='position: absolute'>

[Zippowxk]

The <Transition> Component works fine, the behavior is the logics of transform

[sadeghbarati]

https://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements

https://htmlreference.io/

Note: span is inline element

[EmmyMay]

Firstly, you cannot translate an inline-element

Secondly taking away the body element styling does not affect the animation when I tried it.

[tsxoxo]

Thanks for all the feedback!

I learned much about transform.

---

The issue of <span> not wanting to move has been answered for me :). (see links in @sadeghbarati's answer)

Still ot sure about the veering to the left or the disappearing at the end of the animation. 🤔

[edison1105]

this is the expected behavior.