CODEWITHSUNDEEP
csscss-animations
Ivan Sobolev
Ivan Sobolev

Reputation: 33

JS hover-like animation

I am not really good in CSS animations/transitions and have no idea what of them exactly have to use to implement hover-like animation with JS.

I want to call animation when I change data to highlight it, then reset it back to default state, after like 0.5 seconds. And being able to do that many times to the same element (without refreshing page / hiding|showing it).

Upvotes: 2

Views: 7085

Answers (1)

user4602228
user4602228

Reputation:

Consider the following code

HTML

<div id="item">hover me</div>

CSS

#item{
   transition : all 0.5s ease-out;
   background : #fff;
   color      : #000;
}

.hovered{
   background : #000 !important;
   color      : #fff !important;
}

JS

item.onmouseenter = function(){
   this.classList.add('hovered');
}

item.onmouseleave = function(){
   setTimeout(function(){
      this.classList.remove('hovered');
   }.bind(this),1000)
}

check out this fiddle : https://jsfiddle.net/1ty551gL/

to get it working automatically on data change :

JS

function onchange(){

   item.classList.add('hovered');

   setTimeout(function(){
       item.classList.remove('hovered');
   },1000);

}

Upvotes: 1

Related Questions