13

使用成帧器动作，当悬停在作为按钮的父元素上时，我想动画我的图标组件旋转 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.

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

4

2 回答 2

22

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

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

于 2019-08-30T02:05:37.860 回答
1

Tho 第一个答案已经足够了，这是文档中的一些概念：

传播：如果一个运动组件有子组件，变体的变化将通过组件层次结构向下流动。变体中的这些更改将向下流动，直到子组件定义其自己的动画属性。

因此，这意味着默认情况下，子运动组件将继承父变体并发挥相同的作用，直到您指定它们自己的。

查看文档：传播

于 2021-05-19T09:15:21.997 回答