javascript - Frame-Motion 事件处理程序在具有 svg 路径的子组件中不起作用
问题描述
Framer Motion 在子组件中传递事件处理程序时遇到问题。
下面的沙箱: https ://codesandbox.io/s/framer-motion-svg-checkbox-forked-vgrre?file=/src/Example.tsx
预期的行为是,当我将鼠标悬停在黑色圆圈上时,会出现一个胶囊形状的图标。当我将光标移出圆圈时,胶囊形状图标将消失。在上面的示例中,如果我将 onMouseEnter 和 onMouseOut 放在 CircleBackground 组件中,它们将不起作用。(就像我现在拥有的那样)但是如果我将它们移动到 <motion.svg>,那么当悬停在 svg 容器上时会出现胶囊形状图标。但目的是让胶囊形状仅在我将鼠标悬停在圆圈上时出现,而不是在 svg 容器上。因为我在空白处悬停时不需要动画。
希望我把我的问题说清楚了。谢谢
解决方案
这是您的问题的可能解决方案:
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)}
/>
推荐阅读
- mysql - 仅显示本月没有更新的记录
- javascript - Jquery 滚动监听器不起作用,你能告诉我问题是什么吗?
- c# - 水晶报表详细信息部分
- r - 我如何构建一个闪亮的应用程序,ggplot 代表 2 个类别变量的 %
- c++ - 如果您可以在 C++ 中使用将串行数据视为文件,那么 termios 的目的是什么?
- mysql - MySQL Workbench 在服务器上执行脚本 - 错误 #1064
- imagej - 使用 ImageJ MRI Retina Tool ijm 的错误消息
- python - 重写 insert() 函数 - 列表索引超出范围
- c++ - 预期类型得到了 Element c++
- c++ - 什么是 Jenkins 工作区目录?