I'm trying to add an animation to an element when someone hover on it.

My thought is to add a class with keyframes and attach an mouseover event listener to it.

The reason I don't use CSS is because I want the animation to be finished even the mouse leave the element before the animation is finished. For example, the mouse is moved out of element when rotating on 180 degree (full animation is 360 degree)

But sadly it's not working and I don't know why...

const item = document.querySelector('#rotate');

item.addEventListener('mouseover',function(e) {
  if(item) e.classList.add('rotate');
});

#div {
  width: 120px;
  height: 120px;
  background-color: orange;
}

.rotate {
  animation: rotating 1s ease 0s 1 normal forwards;
}

@keyframes rotating {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

<div id='rotate'></div>

CodePudding user response：

You're already on the right path. You can listen for the animationend event on the div and remove the rotate class when the event is fired. I've corrected your example snippet below.

const item = document.querySelector('#rotate');

item.addEventListener('mouseover', function(e) {
  if(item) item.classList.add('rotate');
});

item.addEventListener('animationend', function(e) {
  if(item) item.classList.remove('rotate');
});

#rotate {
  width: 120px;
  height: 120px;
  background-color: orange;
}

.rotate {
  animation: rotating 1s ease 0s 1 normal forwards;
}

@keyframes rotating {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

<div id='rotate'></div>

CodePudding user response：

I would say you were pretty close. firstly you must change #div to #rotate then add the class directly to the item then when animation is done remove the class so that it can run again

const item = document.querySelector('#rotate');

item.addEventListener('mouseover', function(e) {
  item.classList.add('rotate');
});

item.addEventListener('animationend', function(e) {
  item.classList.remove('rotate');
});

#rotate {
  width: 120px;
  height: 120px;
  background-color: orange;
}

.rotate {
  animation: rotating 1s ease 0s 1 normal forwards;
}

@keyframes rotating {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

<div id='rotate'></div>

CodePudding user response：

Doesn't change your code too much.

1. e refers to the event which is incorrect use of it, you should use this to target the current element
2. use mouseenter will be better in this sitution when you want to trigger an animation when use hover it .

const item = document.querySelector('#rotate');

item.addEventListener('mouseenter',function(e) {
  if(item) this.classList.add('rotate');
});

#rotate {
  width: 120px;
  height: 120px;
  background-color: orange;
}

.rotate {
  animation: rotating 1s ease 0s 1 normal forwards;
}

@keyframes rotating {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

<div id='rotate'></div>