Animer les enfants au survol du parent avec Framer-motion

Question

En utilisant framer motion, je veux animer mon composant Icon pour qu'il pivote de 90 degrés lorsqu'il survole l'élément parent qui est un bouton.

<motion.button type="button" whileHover={{scale: 1.1}}>
    Visit our Industry 
    {/*Animate this Icon to rotate 90 degrees*/}
    <Icon type="arrow-up" /> 
</motion.button>

J'ai vu l'utilisation des variantes mais je ne suis pas sûr de savoir comment les utiliser réellement avec des accessoires tels que whileHover .

Toute aide sera appréciée car il s'agit d'une nouveauté.

Answer 1

Vous devez définir "whileHover" comme une chaîne de caractères et utiliser les variantes pour l'animation.

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

Answer 2

Bien que la première réponse soit suffisante, voici quelques notions tirées de la documentation :

Propagation : Si un composant de mouvement a des enfants, les modifications de la variante descendront dans la hiérarchie des composants. Ces modifications de la variante seront répercutées jusqu'à ce qu'un composant enfant définisse sa propre propriété animate.

Cela signifie que, par défaut, les composants de mouvement enfants hériteront de la variante parentale et agiront de la même manière, jusqu'à ce que vous spécifiiez leur propre variante.

Consultez le document : PROPAGATION