Applying transform animations with floating-ui/vue

[DarthSaul]

Hello!

I'm trying to implement transform-based CSS animations on my tooltip content, so that I can create the effect of the tooltip content sliding out from the trigger. I'm starting with using the Vue built-in <Transition> component, but when I provide a transform property, I get the effect of the tooltip content first displaying at left: 0, right: 0 on the document body, then sliding into the correct position. This behavior is expected, as by default, "the floating element is positioned using transform in the floatingStyles object." (from floating-ui/vue docs).

In the same section of the docs linked above, I see the following tip:

If you’d like to retain transform styles while allowing transform animations, create a wrapper, where the outermost node is the positioned one, and the inner is the actual styled element.

Does anyone have an example of this implementation? I've been trying lots of different things but getting nowhere :(

As the title indicates, I'm working in Vue.js with the floating-ui/vue library!

Thanks in advance!!