Framer Motion whileHover动画无法重复播放问题求助

问题原因：whileHover的默认触发逻辑是在鼠标悬停开始时执行一次keyframes动画序列，即使设置了repeat: Infinity，动画完成后也不会自动重复——因为Framer Motion认为whileHover的状态已经达成，不会再次触发动画循环。

解决方案1：使用useHover钩子配合animate属性控制循环 #

通过手动监听hover状态，在悬停时开启无限重复动画，离开时停止并恢复初始状态：

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

function HoverAnimatedElement() {
  const { hovered } = useHover();

  return (
    <motion.div
      animate={hovered ? { y: [0, -4, 0] } : { y: 0 }}
      transition={{
        duration: 0.3,
        repeat: hovered ? Infinity : 0,
        repeatType: "loop",
        ease: "easeInOut"
      }}
      style={{ /* 你的样式 */ }}
    >
      ...
    </motion.div>
  );
}

解决方案2：调整whileHover的动画逻辑（简化版） #

如果不想使用钩子，可以在whileHover的transition中明确设置循环参数，不过这种方式在部分场景下可能存在触发延迟：

<motion.div
  whileHover={{
    y: [0, -4, 0],
    transition: {
      duration: 0.3,
      repeat: Infinity,
      repeatType: "loop",
      repeatDelay: 0,
      ease: "easeInOut"
    }
  }}
>
  ...
</motion.div>

注意：第二种方案的稳定性不如第一种，推荐使用基于useHover的方案，逻辑更可控。

内容的提问来源于stack exchange，提问作者JusticeMatthew