成帧器运动在悬停结束时遵循相同的持续时间

Question

我有一个动画可以在悬停时缩放 div，持续时间为 2，它工作正常。当鼠标离开 div 时，我希望遵循相同的持续时间。目前 div 会立即缩小到原始大小。

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

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

有一个 onHoverEnd 属性，但它是一个函数。我是否必须在该函数中手动启动另一个动画？

Codesandbox link

Answer 1

通过使用 onHoverStart 和 onHoverEnd

手动声明开始和结束动画来实现

const start = useCallback(() => {
    controls.start("hoverStart");
  }, [controls]);

  const end = useCallback(() => {
    controls.start("hoverEnd");
  }, [controls]);

成帧器运动在悬停结束时遵循相同的持续时间

Framer motion Follow same duration on hover end

reactjs

framer-motion