framer-motion - 如何使成帧器运动与样式化的组件关键帧一起工作？

Question

https://codesandbox.io/s/keyframe-plus-whilehover-zodx7?file=/src/App.js 如果将关键帧动画应用于组件，则像 whileHover 或 onTap 这样的任何事件都不会在该 motion.div 上起作用. 使用样式组件为 div 设置动画的原因有时是帧运动，例如在关键帧动画期间无法更改 z-index。我正在尝试将 styled-component 与 framer-motion 结合在一起。

Answer 1

您根本不将关键帧与成帧器运动混合。开发 framer-motion 的全部目的是让动画比使用 CSS 更简单和对 React 更友好。阅读文档并进行一些练习以更好地掌握其功能。

我重新编写了您的代码，您可以在此处查看https://codesandbox.io/s/keyframe-plus-whilehover-forked-y7iqr?file=/src/App.js