How to animate a Toast exit without force mount

[Ericlm]

I'm currently having issues with the Toast component because it closes without any exit animation. The only way I make it works is by forcing the mounting of the ToastRoot component like :

<Toast.Root v-model:open="open" force-mount>
    <Transition
      enter-active-class="ease-out duration-300"
      enter-from-class="translate-x-full"
      enter-to-class="translate-x-0"
      leave-active-class="ease-in duration-300"
      leave-from-class="translate-x-0"
      leave-to-class="translate-x-full"
    >
      <div
        v-if="open"
        class="
          pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg
          bg-white shadow-lg ring-1 ring-black/5
          dark:bg-gray-700
        "
      >

But I would prefer it to work without forcing the rendering of the toast root. How can I do that ?

[MickL]

@Ericlm Did you find a solution? I dont care much about force-mount, I would be happy if I could even get ANY exit animation with Motion but I just cant make it work...

<template>
  <ToastProvider>
    <AnimatePresence>
      <ToastRoot
        v-for="notification of notificationsStore.items"
        :key="notification.id"
        class="bg-white rounded-lg shadow-lg p-3"
        as-child
      >
        <Motion
          :initial="{ opacity: 0 }"
          :animate="{ opacity: 1 }"
          :exit="{ opacity: 0 }">
          <ToastTitle class="mb-1 font-medium leading-tight">
            {{ notification.title }}
          </ToastTitle>

          <ToastDescription>
            {{ notification.description }}
          </ToastDescription>
        </Motion>
      </ToastRoot>
    </AnimatePresence>

    <ToastViewport class="fixed bottom-2 right-2 flex flex-col gap-2 w-78 " />
  </ToastProvider>
</template>