onMouseLeave/onMouseOut 有时会在页面刷新时触发 React答案

【问题标题】：onMouseLeave/onMouseOut sometimes triggered on page refresh ReactonMouseLeave/onMouseOut 有时会在页面刷新时触发 React
【发布时间】：2021-07-20 22:41:20
【问题描述】：

我有一个图像，当我将鼠标放在它上面时，会触发 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 上才会出现此问题。

【问题讨论】：

这能解释清楚吗？ stackoverflow.com/questions/1638877/… 如果可能的话，最好坚持使用 CSS 制作动画。
很遗憾没有。就像我说的，使用 onMouseOver 或 onMouseEnter 会出现同样的问题。另一方面，我已经在使用 CSS 制作动画了。 handleAnimation 函数基本上是在 className 上放置一个“.active”，然后会出现一些带有过渡的样式。无论如何感谢您的建议。

标签： javascript reactjs css-animations onmouseover onmouseout

【解决方案1】：

您是否在使用任何类型的状态 Ref 瞬间。如果您正在使用状态，那么它会重新渲染页面，这就是它破坏动画的原因。

【讨论】：

是的，我正在使用状态，但无论如何，为什么它有时在页面刷新时效果很好，而在其他情况下却不行？