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 проблема появляется.

Это объясняет? stackoverflow.com/questions/1638877/ Лучше придерживаться CSS для анимации, если это возможно.   —  person Gabriel Caramés    schedule 21.07.2021

К сожалению нет. Как я уже сказал, при использовании onMouseOver или onMouseEnter возникает та же проблема. С другой стороны, я уже использую CSS для анимации. Функция handleAnimation в основном помещает .active в className, и появляется несколько стилей с переходом. В любом случае спасибо за предложение.   —  person Gabriel Caramés    schedule 21.07.2021