jquery - css转场高亮优化

Question

我正在尝试制作一个动画，以便在js调用上，一个盒子会立即改变颜色，并在缓慢恢复后，我做到了，但我认为这可能不是最佳解决方案:

var d = $('#d1');
d.click(function() {
  d.addClass('high');
  setTimeout(function() {
    d.addClass('trans');
    d.removeClass('high');
    setTimeout(function() {
      d.removeClass('trans');
    }, 1000);
  }, 500);
});

div {
  width: 100px;
  height: 100px;
  background: gray;
}

div.high {
  background: yellow;
}

.trans {
  transition: all 1s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='d1'></div>
<br> click on the box

可以用更少的js/更优化的解决方案来实现吗？

(我在这个演示中使用了 click，但我需要在 js 函数调用上执行此操作)

Answer 1

您可以使用 CSS 动画进行简化:

var d = $('#d1');
d.click(function() {
  d.addClass('high');
  /* No need to remove if you want it to happen one time*/
  setTimeout(function() {
    d.removeClass('high');
  }, 1000);
  /**/
});

div {
  width: 100px;
  height: 100px;
  background: gray;
}

div.high {
  animation: anim 1s ease-in-out;
}

@keyframes anim {
  0%,
  50% {
    background: yellow;
  }
  /* We only specify to 50% so it revert back to initial color 
     and thus can be used with different div having different colors
   */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='d1'></div>
click on the box