Затухающий переход между контекстными классами начальной загрузки

Question

Я пытаюсь изменить фон строки таблицы начальной загрузки 4 (table-danger). И медленно (в течение 1 секунды) фон возвращается к своему первоначальному цвету (белому).

Самое близкое, что я получил, - это добавить класс, а затем удалить его. Тем не менее, это создает резкое изменение цвета. Мне бы хотелось, чтобы цвет фона мгновенно становился красным, а затем медленно переходил в белый.

$('#row_1').addClass("table-danger") //Turn background red instantly
$('#row_1').removeClass("table-danger") //I want this to fade into a white background. Not just an immediate change.

Вот скрипка https://jsfiddle.net/gc85wfh9/8/

Answer 1

Вам необходимо добавить переходы для свойства background-color всех элементов, которые вы изменяете. В вашем случае до <tr> с, <td> с и <th> с.

.table th, 
.table td,
.table tr {
  transition: background-color 1s ease-in-out;
}

Посмотри работает .