如何实现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() {

  var $td = $(this).addClass("red");

  setTimeout(() => $td.addClass('yellow'), 50);

});

table { border-collapse: collapse; }

td {

  border: solid black 1px;

  height: 50px;

  width: 50px;

  cursor: pointer;

}

.red { background-color: red; }

.yellow {

  background-color: yellow;

  transition: background-color 1s ease-in-out;

}

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

<table>

  <tr>

    <td></td>

  </tr>

</table>