Анимируйте детей при наведении указателя мыши на родителя с помощью 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.

Любая помощь будет оценена по достоинству, так как это новая вещь.


reactjs framer-motion react-animations web-animations
person ArchNoob    schedule 20.07.2019    source источник

Ответы (2)


arrow_upward
16
arrow_downward

Вам нужно установить 'whileHover' в строку и использовать вариации для анимации.

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

person zero    schedule 30.08.2019
comment
это удобный ужин. Почему это не помечено как ответ? - person Sergiu; 01.10.2019
comment
Вы только что спасли мой бекон от по-настоящему раздражающего жучка, с которым я боролся последние 2 дня. ржу не могу - person Joel Hager; 17.11.2020

arrow_upward
0
arrow_downward

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

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

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

Ознакомьтесь с документом: РАСПРОСТРАНЕНИЕ

person ObinasBaba    schedule 19.05.2021