如何使成帧器运动与样式化的组件关键帧一起工作？
How to make framer motion work with styled component keyframes?
https://codesandbox.io/s/keyframe-plus-whilehover-zodx7?file=/src/App.js
如果将关键帧动画应用到某个组件，则 whileHover 或 onTap 等任何事件都不会在该组件上起作用 motion.div。
使用样式组件为 div 设置动画的原因有时是成帧器运动，例如在关键帧动画期间无法更改 z-index。我正在尝试将 styled-component 与 framer-motion 结合在一起。
您只是不要将关键帧与 framer-motion 混合使用。开发 framer-motion 的全部目的是使动画比使用 CSS 更简单，对 React 更友好。阅读文档并进行一些练习以更好地掌握其功能。
我重新格式化了你的代码，你可以在这里查看https://codesandbox.io/s/keyframe-plus-whilehover-forked-y7iqr?file=/src/App.js
https://codesandbox.io/s/keyframe-plus-whilehover-zodx7?file=/src/App.js 如果将关键帧动画应用到某个组件，则 whileHover 或 onTap 等任何事件都不会在该组件上起作用 motion.div。 使用样式组件为 div 设置动画的原因有时是成帧器运动，例如在关键帧动画期间无法更改 z-index。我正在尝试将 styled-component 与 framer-motion 结合在一起。
您只是不要将关键帧与 framer-motion 混合使用。开发 framer-motion 的全部目的是使动画比使用 CSS 更简单，对 React 更友好。阅读文档并进行一些练习以更好地掌握其功能。
我重新格式化了你的代码，你可以在这里查看https://codesandbox.io/s/keyframe-plus-whilehover-forked-y7iqr?file=/src/App.js