Framer Motion如何让hover结束动画与hover状态保持相同过渡时长

你不需要在onHoverEnd中手动触发额外动画，你遇到的问题是仅为hover激活状态定义了过渡时长，未对默认状态的切换配置过渡规则，因此鼠标移出时元素会直接复位无动画。

Framer Motion的whileHover手势会自动处理状态切换的过渡逻辑，你只需补充全局或初始状态的过渡配置即可，有两种常用实现方案：

方案1：配置组件全局过渡（更简洁） #

直接在motion.div组件上添加transition属性，所有状态切换都会复用该配置：

import "./styles.css";
import { motion } from "framer-motion";

const variants = {
  hover: { scale: 2 }
};
export default function App() {
  return (
    <div className="App">
      <motion.div
        variants={variants}
        whileHover="hover"
        className="card"
        transition={{ duration: 2 }}
      ></motion.div>
    </div>
  );
}

方案2：显式定义初始状态变体 #

在variants中补充初始状态的过渡配置，适合需要区分hover进入和退出动画参数的场景：

import "./styles.css";
import { motion } from "framer-motion";

const variants = {
  initial: { scale: 1, transition: { duration: 2 } },
  hover: { scale: 2, transition: { duration: 2 } }
};
export default function App() {
  return (
    <div className="App">
      <motion.div
        initial="initial"
        variants={variants}
        whileHover="hover"
        className="card"
      ></motion.div>
    </div>
  );
}

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