[Bug]: Popover has no animation on exit using Motion Vue

[MickL]

Environment

Developement/Production OS: macOS
Node version: bun 1.2.3
Package manager: bun 1.2.3
Radix Vue version: 2.0.0
Vue version: 3.5.13

Link to minimal reproduction

https://github.com/MickL/reka-popover-bug

Steps to reproduce

Using Motion Vue it has a enter animation but no exit animation:

<template>
   <PopoverRoot v-model:open="isOpen">
      <PopoverTrigger class="bg-white shadow-sm p-4 bg-gray-100 rounded-full">
        Push me
      </PopoverTrigger>
      <PopoverPortal>
        <AnimatePresence>
          <PopoverContent
            as-child
            :side-offset="10"
            class="bg-white shadow-sm p-4 rounded-lg max-w-xs origin-top-left"
            align="start"
          >
            <Motion
              :initial="{ opacity: 0, scale: 0 }"
              :animate="{ opacity: 1, scale: 1 }"
              :exit="{ opacity: 0, scale: 0 }"
            >
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Adipisci animi, asperiores aut delectus dolore, eaque est et ex
                facere ipsum iste maiores officia provident quidem ratione, rem
                sit tempore tenetur.
              </p>
            </Motion>
          </PopoverContent>
        </AnimatePresence>
      </PopoverPortal>
    </PopoverRoot>
</template>

Describe the bug

Expected behavior

No response

Context & Screenshots (if applicable)

No response

[zernonia]

Hi @MickL ! This is because Popover renders additional div that causes the animation to not be binded correctly. Thus in 0.10.0 of motion-v we introduced a new prop that unwrap the target element.

See demo.
See docs

[MickL]

Thanks!!
Maybe it would be good to have all the Reka examples with animations because it can get really confusing to get them working with all those containers and as-child props.

Btw. I have one more case where it works with v-if but not with v-show. Will try to create a reproduction later.

Also I figured some animations dont work well with v-if, e.g. animating width from 0 to auto to 0. Not sure if thats a bug or not? With v-if the enter animation always starts from zero while with v-show it forwards/backwards smoothly when toggling while the animation is running.