1

所以几天前我刚刚学习了成帧器运动，现在我遇到了第一个障碍。我只是在为容器和按钮设置动画，直到我偶然发现以下问题：

我试图用以下变体为 div 容器设置动画：

const containerVariant = {
  hover: {
    rotateZ: [0, 3, -3, 0],
    transition: {
      yoyo: Infinity,

    }
  }
};

以及具有以下变体的 Button：

const btnHoverVariant = {
  hidden: {
    scale: 1,
    opacity: 1,
    transition: {
      type: "tween",
      duration: 0.25,
      ease: "easeInOut"
    }
  },
  hov: {
    scale: 1.1,
    opacity: 0.8,
    transition: {
      type: "tween",
      duration: 0.25,
      ease: "easeInOut"
    }
  }
};

我的问题是，当我将鼠标悬停在容器上时它可以工作（摆动效果），但是当我将鼠标悬停在按钮上时，按钮悬停效果（缩放效果）它不起作用。

我确实找到了解决这个问题的方法，即对 whileHover、transition 和 initial props 使用对象语法。但是对于代码模块化，我想使用变体，所以如果有人可以帮助我解决我的问题，将不胜感激！这是解决方法的一个片段：

<motion.button
          initial="{{ scale: 1, opacity: 1 }}"
          whileHover={{ scale: 1.1, opacity: 0.8 }}
          transition={{ type: "tween", duration: 0.25, ease: "easeInOut" }}
          style={btnStyle}
          >
          Click Me!
</motion.button>

以下是上述两种情况的代码沙箱：https ://codesandbox.io/s/stoic-diffie-0m2mp?file=/src/test.jsx

4

0 回答 0