时间戳

首页 > 解决方案 > 成帧器运动中的悬停动画。文字在视觉上变得扭曲

javascript - 成帧器运动中的悬停动画。文字在视觉上变得扭曲

问题描述

我是帧运动的新手，我想在按钮上制作悬停动画。我能够成功创建动画，但是当我将鼠标悬停在按钮上时，文本会变形并且我想修复它，我已经完成了研究，但我无法找到解决方案

我只想将动画应用于按钮而不是其中的文本

我试过添加<motion.button layout />

我试过添加<motion.button layout="position" />

我还添加了<span>button text</span>

但问题仍然存在

     <motion.button
        style={{
          padding: "10px 30px",
          border: "none",
          marginTop: "20px"
        }}
        whileHover={{
          scale: 1.1
        }}
        whileTap={{
          scale: 0.9
        }}
      >
        Button
      </motion.button>

如果有人能帮助我解决这个问题，那就太好了， https ://codesandbox.io/s/late-darkness-ejuzt?file=/src/App.js:134-419是我的代码沙箱链接，你可以看看我在说什么

谢谢！

标签： javascriptreactjsanimationframer-motion

解决方案

据此，您不能使用成帧器“禁用”子组件的缩放。尝试使用反应组件和变量（或 CSS）来禁用子缩放。

推荐阅读