css - 引导折叠行的颜色更改延迟

Question

我想更改表格内折叠行的颜色，但由于某种原因有延迟。当您点击该图标时，行会展开，但在颜色更改之前会有延迟。有解决办法吗？

Fiddle

.table>tbody>tr.collapse>td {
background-color:red;
}

Answer 1

当元素显示时，Bootstrap 会在过渡期间删除 collapsed 类，并且只会在该过渡结束后再次添加它。

但是，它会在该过渡期间添加 collapsing 类 - 因此，如果您也为具有该类的元素提供红色背景色，它应该可以按您希望的方式工作。

.table>tbody>tr.collapse>td,
.table>tbody>tr.collapsing>td{
    background-color:red;
}

.table>tbody>tr:not(.collapse):not(.collapsing):nth-child(odd)>td {
    background-color:#ecf3f8;
}

http://jsfiddle.net/dy83cxaw/5/