我目前面临这个问题,尽管我的规模在悬停时被触发,但我的动画拒绝工作。
我浏览了文档,但仍然无法弄清楚。我错过了什么?帮助!
这是我的代码和来自浏览器的警告:
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>
最佳答案
whileHover
默认情况下会对属性进行动画处理,无需使用 animate
属性。只需列出您想要设置动画的 x 值即可:
whileHover={{
x: 500,
scale: 1.2,
transition: { ease: "easeOut", duration: 2 },
}}
关于javascript - Animate 不适用于 React 中的 whileHover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60130713/