`<Transition>`: More weird behavior

tsxoxo commented 2 years ago

3.2.37

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

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

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)

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

Really wish this would work

Zippowxk commented 2 years ago

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

Zippowxk commented 2 years ago

The Component works fine, the behavior is the logics of transform

sadeghbarati commented 2 years ago

Note: span is inline element

EmmyMay commented 2 years ago

Firstly, you cannot translate an inline-element

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

tsxoxo commented 2 years ago

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 commented 11 months ago

this is the expected behavior.

vuejs / core