0

I have an image and when i put the mouse on it, onMouseOver event is triggered and an animation appears. Then when i leave the mouse from image the animation ends.

Here is a fragment of my code, i'm using React and Mozilla Firefox:

<img className={classNameDefine('presentation__image')}    
    onMouseOver={() => {
       handleAnimation('animationA')
    }} 
    onMouseLeave={() => {
       handleAnimation('animationA')
    }}
src={logo} alt="s"/>

The issue is that sometimes when i refresh page and put mouse on the image it works well, but other times on refresh the onMouseLeave event it triggered for no reason and breaks my animation.

I tried using onMouseEnter intead of onMouseOver and onMouseOut instead of onMouseLeave, but the same problem occours.

Why sometimes it works well but in others times not?

PD: I tried by using another navigator like Chrome and Edge, and the mouse events works fine without bugs. Now i don't know if there is a problem between Mozilla (navegator i am using) and React. Only on mozilla the issue appears.

Gabriel Caramés
  • 67
  • 7
  • Does this explain it ? https://stackoverflow.com/questions/1638877/difference-between-onmouseover-and-onmouseenter Better to stick with CSS for animation if it's possible. – Aleksandr Smyshliaev Jul 20 '21 at 22:46
  • Unfortunately not. Like i said, using onMouseOver or onMouseEnter the same problem appears. On the other hand, i'm already been using CSS for animation. The handleAnimation function basically puts an ".active" on a className and a few styles with transition appears. Thanks for the suggestion anyways. – Gabriel Caramés Jul 21 '21 at 01:10

1 Answers1

0

Are you using any kind of state instant of Ref. If you are using state then it Re-Renders the page and that's why it is breaking your animation.

nova_master
  • 41
  • 1
  • 4