1

Framer Motion 在子组件中传递事件处理程序时遇到问题。

下面的沙箱： https ://codesandbox.io/s/framer-motion-svg-checkbox-forked-vgrre?file=/src/Example.tsx

预期的行为是，当我将鼠标悬停在黑色圆圈上时，会出现一个胶囊形状的图标。当我将光标移出圆圈时，胶囊形状图标将消失。在上面的示例中，如果我将 onMouseEnter 和 onMouseOut 放在 CircleBackground 组件中，它们将不起作用。（就像我现在拥有的那样）但是如果我将它们移动到 <motion.svg>，那么当悬停在 svg 容器上时会出现胶囊形状图标。但目的是让胶囊形状仅在我将鼠标悬停在圆圈上时出现，而不是在 svg 容器上。因为我在空白处悬停时不需要动画。

希望我把我的问题说清楚了。谢谢

4

1 回答 1

1

这是您的问题的可能解决方案：

https://codesandbox.io/s/so-q-63601325-68peh?file=/src/Example.tsx:1016-1344

您的HoverBackground和CircleBackground相互覆盖，因此鼠标事件没有到达子组件。

切换指针事件属性HoverBackground解决了这个问题：

<HoverBackground
        path={editHoverBackground}
        variants={tickVariants}
        style={{
          pathLength,
          opacity,
          pointerEvents: isChecked ? "all" : "none"
        }}
        custom={isChecked}
        location="translate(23,39)"
        onMouseOut={() => setIsChecked(!isChecked)}
      />
于 2020-08-26T20:32:05.603 回答