使用 Framer-motion 悬停在父级时为子级设置动画

Question

使用成帧器运动，当我悬停在作为按钮的父元素时，我想为我的 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.

任何帮助将不胜感激，因为这是一个新事物。

Answer 1

您需要将 'whileHover' 设置为字符串并使用变体进行动画处理。

https://codesandbox.io/s/heuristic-wozniak-2z01b