ToastRoot breaks Vue TransitionGroup (height always 0, invisible animation)

[ioannis-FE]

Hey everyone

I am trying to make Radix-Vue toasts work together with Vue’s so that when a toast closes, the other ones move up smoothly (like reorder animation).

The problem is that it seems impossible to animate them, because ToastRoot doesnt render the real DOM node inside the group it teleports the toast into the .

Here’s an example ...

  <ToastProvider>
    <ToastViewport as-child>
      <TransitionGroup
        name="toast"
        tag="ol"
        class="fixed bottom-0 left-0 p-4 flex flex-col gap-2"
        @before-enter="(el) => debugTransition('before-enter', el)"
        @enter="(el) => debugTransition('enter', el)"
        @after-enter="(el) => debugTransition('after-enter', el)"
        @before-leave="(el) => debugTransition('before-leave', el)"
        @leave="(el) => debugTransition('leave', el)"
        @after-leave="(el) => debugTransition('after-leave', el)"
      >
        <div v-for="toast in messages" :key="toast.id" class="toast-wrapper">
          <ToastRoot
            v-model:open="toast.open"
            :force-mount="true"
            :duration="4000"
          >
            <div
              class="toast-item bg-white shadow-xl rounded-lg p-4 flex justify-between items-center"
            >
              <ToastTitle>{{ toast.summary }}</ToastTitle>
              <button
                @click="handleRemove(toast.id)"
                class="text-red-500 font-bold text-lg leading-none"
              >
                ×
              </button>
            </div>
          </ToastRoot>
        </div>
      </TransitionGroup>
    </ToastViewport>
  </ToastProvider>
</template>```

Is there any way to make Radix Toasts reorder like  Vue does?
Or we can apply only (enter/leave) animations but not reorder?