reactjs - 使用 Framer-motion 悬停在父级时为子级设置动画
问题描述
使用成帧器动作,当悬停在作为按钮的父元素上时,我想动画我的图标组件旋转 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
.
任何帮助将不胜感激,因为这是一个新事物。
解决方案
您需要将 'whileHover' 设置为字符串并使用变体进行动画处理。
推荐阅读
- javascript - 在线性时间内查找长度为 N、数字 1 到 N-1 的数组中的重复项,而无需使用额外的 obj/arr 来跟踪计数
- linux - 如何在 Linux 中使用 md5sum 创建递归文件列表并输出到 csv
- excel - VBA - 从创建的报告中移动数据的简单宏导致崩溃或“找不到项目或库”
- spring - 如何在 Spring Integrtion 中测试 MessageChannel?
- ruby-on-rails - React On Rails 调试
- java - 使用类在java中猜测数字的程序
- reactjs - 使用用户身份验证反应使用状态钩子
- html - 如何控制页面上的 div 或 HTML 元素调整大小为 200%
- reactjs - array.map 内的可选 array.map
- reactjs - 如何在本机反应中更新子组件的使用上下文变量