使用 Framer-motion 将鼠标悬停在父项上时为子项设置动画
Animate children when hover at parent with Framer-motion
我想使用 framer motion 为我的 Icon 组件设置动画，使其在鼠标悬停在按钮父元素上时旋转 90 度。
<motion.button type="button" whileHover={{scale: 1.1}}>
Visit our Industry
{/*Animate this Icon to rotate 90 degrees*/}
<Icon type="arrow-up" />
</motion.button>
我看到了变体的使用，但不确定如何真正将它们与 whileHover 等道具一起使用。
任何帮助将不胜感激，因为这是一个新事物。
您需要将 'whileHover' 设置为字符串并使用变体来制作动画。
Tho 第一个答案已经足够了，这里是文档中的一些概念：
Propagation :
If a motion component has children, changes in variant will flow down through the component hierarchy. These changes in variant will flow down until a child component defines its own animate property.
这意味着默认情况下子运动组件将继承父变体并发挥相同作用，直到您指定它们自己的变体。
查看文档：PROPAGATION
我想使用 framer motion 为我的 Icon 组件设置动画，使其在鼠标悬停在按钮父元素上时旋转 90 度。
<motion.button type="button" whileHover={{scale: 1.1}}>
Visit our Industry
{/*Animate this Icon to rotate 90 degrees*/}
<Icon type="arrow-up" />
</motion.button>
我看到了变体的使用，但不确定如何真正将它们与 whileHover 等道具一起使用。
任何帮助将不胜感激，因为这是一个新事物。
您需要将 'whileHover' 设置为字符串并使用变体来制作动画。
Tho 第一个答案已经足够了，这里是文档中的一些概念：
Propagation : If a motion component has children, changes in variant will flow down through the component hierarchy. These changes in variant will flow down until a child component defines its own animate property.
这意味着默认情况下子运动组件将继承父变体并发挥相同作用，直到您指定它们自己的变体。
查看文档：PROPAGATION