javascript - 引导上下文类之间的淡化过渡

Question

我正在尝试更改 bootstrap 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.

这是一个 fiddle https://jsfiddle.net/gc85wfh9/8/

Answer 1

您需要为 background-color 添加转换您要更改的所有元素的属性。在你的情况下，到 <tr>小号，<td> s 和 <th>

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

查看working .