Version

3.2.31

Reproduction link

stackblitz.com

Steps to reproduce

Please see the link to StackBlitz

What is expected?

I'd expect the transition to work

What is actually happening?

The transitoin does not work

According to the docs the transition component should also work with v-show (and it does I guess). However, since v-show basically toggles the display property I was expecting that this would also work inside a render function. In the StackBlitz I posted above, the 'bug' can be reconstructed by scrolling to the bottom of the page. The toTop element should be animated. My assumption is, that v-show is broadcasting some event internally, which is handled by the transition component, could this be the case? So I don't know if this is actually a bug, or expected behavior.

I'd appreciate your feedback.

Cheers

the v-show directive interoperates with the transition. You can see the gist of it here:

https://github.com/vuejs/core/blob/4a3237ad9300693e465f82a6be3552565a1c4be3/packages/runtime-dom/src/directives/vShow.ts#L24-L33

you can manually apply the v-show directive yourself, taking hints from the compiler output, i.e.: Playground

import {
  withDirectives,
  vShow,
  Transition,
} from 'vue'

h(Transition, null, {
  default: () => withDirectives(toTop, [ [vShow, pos.value >= offset] ])
})

Docs: https://vuejs.org/api/render-function.html#withdirectives