在我的Next.js应用程序中，我想将链接实现为单击时“ Flink ”一次的按钮，类似于Mac OS菜单项的行为。
具体来说，链接按钮必须推迟导航到其目的地，直到 Flink 动画完成。这似乎是不可能与帧运动的gesture system。这应该是可能的AnimatePresence，但我还没有能够使它工作。

示例

我尝试了什么

我尝试了下面的代码，它根本不产生动画：

BlinkButton.js

import { AnimatePresence, motion } from "framer-motion";

export default function BlinkButton(props) {
  return (
    <AnimatePresence>
      <motion.button
        key={props.id}
        className="..."
        exit={{ opacity: 0 }}
        transition={{ duration: 0.1 }}
      >
        {props.children}
      </motion.button>
    </AnimatePresence>
  );
}

SomeOtherComponent.js

<Link href={href}>
  <BlinkButton id={label}>
    {icon}
    <p>{label}</p>
  </BlinkButton>
</Link>