Как добиться постепенного изменения цвета в таблицах 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. 50 мс должно быть достаточно. Попробуйте это:

$("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>