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

См. также:  Не удается заставить setValue правильно работать в GoogleScripts
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 1
  1. Gabriel Caramés

    Используете ли вы какое-либо состояние мгновенного Ref. Если вы используете состояние, оно повторно отображает страницу и поэтому нарушает вашу анимацию.

    Да, я использую состояние, но в любом случае, почему оно иногда хорошо работает при обновлении страницы, а в других — нет? person Gabriel Caramés; 21.07.2021

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: