我有一个引导条纹表 ( .table-striped > tbody > tr:nth-of-type(odd){background-color: #f9f9f9;}
),我使用这一点 CSS 将用户的注意力吸引到更新的行:
.attention { animation: 3s attention; }
@keyframes attention {
0% { background-color: #bcf516; }
100% { background-color: initial; }
}
...并添加class="attention"
动态地到<tr>
其中更新了哪一行。
因此,更新了第 3 行的表格将如下所示:
<table class="table table-striped">
<tr><td>Row #1</td></tr>
<tr><td>Row #2</td></tr>
<tr class="attention"><td>Row #3</td></tr>
<tr><td>Row #4</td></tr>
</table>
它几乎就像一个魅力。对于白色的行来说,这是完美的。但对于灰色行,淡入淡出一直到白色,然后突然弹回到最初的灰色。
如何修复它,最好仅使用 CSS?
最佳答案
只需从动画中删除 100%
状态即可使用元素中定义的颜色。
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
.attention {
animation: 3s attention;
}
@keyframes attention {
0% {
background-color: #bcf516;
}
}
<table class="table table-striped">
<tr>
<td>Row #1</td>
</tr>
<tr>
<td>Row #2</td>
</tr>
<tr class="attention">
<td>Row #3</td>
</tr>
<tr>
<td>Row #4</td>
</tr>
</table>
背景颜色的初始
值为透明
。因此,您将首先淡入透明,然后在动画完成时返回到定义的颜色。这就是为什么它可以与非彩色 tr
配合良好的原因。
If a
100%
orto
keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.ref
关于html - 条纹 table 上的背景颜色褪色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54410559/