Animate 不适用于 React 中的 whileHover

Question

我目前面临这个问题，尽管我的比例在悬停时被触发，但我的动画拒绝工作。

我查看了文档，但仍然无法弄清楚。我错过了什么？帮助！

这是我的代码和来自浏览器的警告：

            import { motion } from "framer-motion";

            <motion.div className="heart-overlay"

                whileHover={{
                    animate: {x: 500},
                    scale: 1.2,
                    transition: { ease: "easeOut", duration: 2 },
                }}>

                <div className="heart-top">
                    <Img className="heart-default" src={heart_default_top} />
                </div>
                <div className="heart-bot">
                    <Img className="heart-default" src={heart_default_bot} />
                </div>
            </motion.div>

Answer 1

whileHover 默认情况下会为属性设置动画，不需要在那里使用 animate 属性。只需列出您要设置动画的 x 值：

whileHover={{
  x: 500,
  scale: 1.2,
  transition: { ease: "easeOut", duration: 2 },
}}

Animate 不适用于 React 中的 whileHover

Animate does not work with whileHover in React

javascript

reactjs

framerjs

framer-motion