JS Hover-ähnliche Animation

Question

Ich bin nicht wirklich gut in CSS-Animationen/Übergänge und habe keine Ahnung, was von ihnen genau zu verwenden, um Hover-ähnliche Animation mit JS zu implementieren.

Ich möchte die Animation aufrufen, wenn ich die Daten ändere, um sie hervorzuheben, und sie dann nach 0,5 Sekunden auf den Standardzustand zurücksetzen. Und in der Lage zu sein, dies oft zu tun (ohne die Seite zu aktualisieren/zu verstecken).

Answer 1

Betrachten Sie den folgenden 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 diese Geige: https://jsfiddle.net/1ty551gL/

, um es automatisch auf Datenänderung zu erhalten arbeiten:

JS

function onchange(){ 

    item.classList.add('hovered'); 

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

}