如何在Framer Motion中让变体动画按设置反向执行？

要让鼠标移出时的反向动画和正向使用相同的过渡参数，直接在**变体（variants）**里统一配置过渡规则即可，不用额外处理反向逻辑，Framer Motion会自动复用对应过渡设置。

方法1：在变体中为目标状态指定transition #

把过渡参数定义在hover状态的变体里，触发和退出hover时都会遵循这套过渡规则：

const boxVariants = {
  default: { scale: 1, opacity: 1 },
  hover: { 
    scale: 1.2, 
    opacity: 0.8,
    // 在此定义过渡参数，反向动画自动复用该配置
    transition: { duration: 0.5, ease: "easeOut" }
  }
};

// 组件调用示例
<motion.div
  variants={boxVariants}
  initial="default"
  whileHover="hover"
/>

方法2：在motion组件上全局设置transition #

如果希望所有状态切换（包括hover的反向）都用同一套过渡，直接在motion组件上设置transition属性即可：

<motion.div
  variants={boxVariants}
  initial="default"
  whileHover="hover"
  transition={{ duration: 0.5, ease: "easeOut" }}
/>

问题根源 #

默认情况下，退出whileHover状态时，Framer Motion会使用内置的默认过渡参数（比如更短的时长），而非hover变体里的自定义设置。把过渡规则绑定到变体状态或组件全局后，反向动画会继承对应配置，保证前后动画效果一致。

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