Оживите детей при наведении на родителя с помощью 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

Answer 2

У 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>

Answer 3

Tho Первого ответа вполне достаточно, вот некоторая концепция из документа:

Распространение : если у компонента движения есть дочерние элементы, изменения в варианте будут проходить вниз по иерархии компонентов. Эти изменения в варианте будут течь вниз, пока дочерний компонент не определит собственное свойство анимации.

Это означает, что по умолчанию дочерние компоненты движения будут наследовать родительский вариант и действовать так же, пока вы не укажете их собственные.

Посмотрите документ: РАСПРОСТРАНЕНИЕ