JSホバーのようなアニメーション

Question

私はCSSのアニメーション/トランジションは実際には良くありませんし、ホバーのようなアニメーションをJSで実装するために正確に何を使用しなければならないのか分かりません。

データを変更するときにアニメーションを呼び出して強調表示し、0.5秒後にデフォルト状態に戻します。そして、同じ要素に何度も何度もやり遂げることができます（ページの表示/非表示|表示）。

Answer 1

は、次のコード

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) 
} 

チェックアウトこのフィドルを考えてみましょう：https://jsfiddle.net/1ty551gL/

それはデータの変化に自動的に作業を取得するには：

JS

function onchange(){ 

    item.classList.add('hovered'); 

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

}