如何解决onMouseLeave/onMouseOut 有时会在页面刷新时触发 React
我有一张图片,当我将鼠标放在上面时,会触发 onMouseOver 事件并出现动画。然后当我从图像上离开鼠标时,动画结束。
这是我的代码片段,我使用的是 React 和 Mozilla Firefox:
<img className={classNameDefine('presentation__image')}
onMouseOver={() => {
handleAnimation('animationA')
}}
onMouseLeave={() => {
handleAnimation('animationA')
}}
src={logo} alt="s"/>
问题是有时当我刷新页面并将鼠标放在图像上时效果很好,但有时在刷新 onMouseLeave 事件时它会无故触发并破坏我的动画。
我尝试使用 onMouseEnter 而不是 onMouseOver 和 onMouseOut 而不是 onMouseLeave,但同样的问题发生了。
为什么有时效果很好,但有时却不行?
PD: 我尝试使用其他导航器(如 Chrome 和 Edge),鼠标事件运行良好,没有错误。现在我不知道 Mozilla(我正在使用的导航器)和 React 之间是否存在问题。仅在 mozilla 上出现此问题。
解决方法
您是否在使用任何类型的 状态 Ref 瞬间。 如果您使用状态,那么它会重新渲染页面,这就是它破坏动画的原因。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。