当动画属性(如animate
或whileHover
)定义为字符串(即VARIANT)时,默认情况下它的值会‘传播’给子对象.因此,您可以在子对象上定义variants
,在父对象上定义whileHover
,并且当其父对象悬停时,取景器运动将对子对象设置动画.你可以在framer motion documentation中找到更多(附有例子).
因此,例如,如果你想在section
悬停时设置h2
的动画,你可以这样做:
const variants = {
hover: { scale: 1.2 },
};
const Example = () => {
return (<motion.section whileHover="hover">
<motion.h2 variants={variants}>Title...</motion.h2>
<motion.div>Lorem ipsum dolor sit amet</motion.div>
</motion.section>);
};