使用Framer-motion在鼠标悬停在父元素上时为子元素添加动画效果

Question

使用 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这样的 props 中真正使用它们。

由于这是一个新的东西，任何帮助都将不胜感激。

- ArchNoob

Answer 1

你需要将“whileHover”设置为字符串，并使用变体进行动画处理。

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

- zero

---

这很方便。为什么没有标记为答案？ - Sergiu

你刚刚解决了我遇到的一个非常恼人的 bug，这个问题让我苦战了两天。哈哈 - Joel Hager

Answer 2

尽管第一个答案已经足够详细了，这里是文档中的一些概念：

传递： 如果一个动效组件有子组件，那么变化将通过组件层级向下流动。这些变化将一直往下流动，直到子组件定义其自身的 animate 属性。

这意味着默认情况下子动效组件将继承父组件的 variant 并表现相同，除非你指定它们自己的 variant。

但也请注意，如果在这些子组件中设置一个 variant（比如initial），其他子组件将会停止继承任何 variant，并变为undefined，这意味着你需要指定它们的 variant。

查看文档：PROPAGATION

- ObinasBaba

Answer 3

Framer Motion有变体，您可以使用它们来实现此目的。

文档链接：文档

以下是在悬停按钮时如何使箭头旋转和缩放的示例：

const arrow = {
  initial: { rotate: 0, scale: 1 },
  animate: { rotate: 90, scale: 1.5 },
}

<motion.button
  initial="initial"
  animate="initial"
  whileHover="animate"
  style={{ flexDirection: "row", display: "flex", alignItems: "center"}}
>
  <div style={{marginRight: 5}}>Visit our Industry</div>
  <motion.div variants={arrow}>↑</motion.div>
</motion.button>

- Nicolai Lissau