如何使用成帧器运动为 reakit popover 设置动画？

Question

我正在尝试使用成帧器运动为 Reakit 的弹出框设置动画。我想让它看起来不透明，如果可能的话，还可以使用缩放或剪辑路径效果。但是刚开始使用不透明度会很好。

我不能让它工作。这是一个重现最低设置的沙箱：https://codesandbox.io/s/kind-lederberg-xkyn2?file=/src/App.tsx:0-811

和代码：

import {
  usePopoverState,
  Popover,
  PopoverDisclosure,
  PopoverArrow
} from "reakit/Popover";
import { motion } from "framer-motion";

const popoverStyle = {
  background: "#eee",
  padding: 24
};

export default function App() {
  const popover = usePopoverState();
  return (
    <div style={{ margin: "0 auto", width: 250 }}>
      <PopoverDisclosure {...popover}>Open Popover</PopoverDisclosure>
      <Popover
        {...popover}
        as={motion.div}
        style={popoverStyle}
        aria-label="Welcome"
        initial={{ opacity: 0, scale: 0 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0 }}
        transition={{ type: "spring", duration: 2 }}
      >
        <PopoverArrow {...popover} />
        Welcome to Reakit!
      </Popover>
    </div>
  );
}

你会怎么做？谢谢！