如何实现html表格渐变颜色

Question

我正在使用 HTML 表格，需要以某种方式实现渐变颜色。我想要的结果是立即添加一个red类，然后这个颜色会逐渐变成黄色。

我搜索并想出了下面的代码，但我不知道如何申请transition: all 1s ease-in-out;。有什么方法可以实现这一点吗？

$("td").click(function() {

  $("td").addClass("red");

});

table {

  border-collapse: collapse;

}

td {

  border: solid black 1px;

  height: 50px;

  width: 50px;

  cursor: pointer;

  /* transition: all 1s ease-in-out; */

}

.red {

  background-color: red;

}

.yellow {

  background-color: yellow

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <tr>

    <td></td>

  </tr>

</table>

Answer 1

把它放在课堂transition上yellow。然后，在添加类之前，您需要稍微延迟一下以允许.red添加该类.yellow。50ms应该足够了。尝试这个：$("td").click(function() {&nbsp; var $td = $(this).addClass("red");&nbsp; setTimeout(() => $td.addClass('yellow'), 50);});table { border-collapse: collapse; }td {&nbsp; border: solid black 1px;&nbsp; height: 50px;&nbsp; width: 50px;&nbsp; cursor: pointer;}.red { background-color: red; }.yellow {&nbsp; background-color: yellow;&nbsp; transition: background-color 1s ease-in-out;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>&nbsp; <tr>&nbsp; &nbsp; <td></td>&nbsp; </tr></table>