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

}

JS悬停式动画

1 个答案: