条纹桌上的褪色背景色 [英] Fading background color on striped table

问题描述

我有一个引导条带化表（ .table-striped> tbody> tr：nth-​​of-type（odd）{background-color：＃f9f9f9;} ），然后使用以下CSS将用户的注意力吸引到更新的行上：

  .attention {animation ：3s注意； } 
 @keyframes注意{
 0％{background-color：＃bcf5​​16; } 
 100％{background-color：initial; } 
} 
  

...并添加 class = attention 动态地更新到其中更新过的行的< tr> 。 >因此第3行已更新的表将如下所示：

 < table class = table table-striped > 
< td>行＃1< / td< / tr> 
< td>行＃2< / td> / tr; 
< tr class = attention>< td>行＃3< / td>< / tr> 
< td>行＃4< / td> / tr; 
< / table> 
  

它几乎像一种魅力一样工作。对于白色行，这是完美的选择。但是对于灰色行，淡入淡出一直到白色，然后突然弹出回到最初的灰色。

如何解决此问题，最好仅使用CSS？

解决方案

只需从动画和颜色中删除 100％状态

  .table -striped> tbody&tr; tr：nth-​​of-type（odd）{background-color：＃f9f9f9;}。attention {动画：3s注意；} @ keyframes注意{0％{background-color：＃bcf5​​16; }}  

 < table class = table table-striped > < tr> < td>行＃1< / td> < / tr> < tr> < td>行＃2< / td> < / tr> < tr class = attention> < td>行＃3< / td> < / tr> < tr> < td>行＃4< / td> < / tr>< / table>  

初始的背景色值为透明。因此，您将首先淡化为 transparent ，然后在完成动画后恢复为定义的颜色。这就是为什么它可以与非彩色 tr 一起正常工作的原因。

---

如果未指定 100％或至关键帧，则用户代理将构造一个100使用动画属性的计算值来设置关键帧百分比。 ^ref

I have a bootstrap striped table (.table-striped > tbody > tr:nth-of-type(odd){background-color: #f9f9f9;}), and I'm drawing the user's attention to the updated row using this little bit of CSS:

.attention { animation: 3s attention; }
@keyframes attention {
    0% { background-color: #bcf516; }
    100% { background-color: initial; }
}

... and adding class="attention" dynamically to the <tr> of which ever row that was updated.

So a table with row #3 updated will look something like this:

<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>

It's almost working like a charm. For white rows, it's perfect. But for gray rows, the fade goes all the way to white, and then suddenly pops back to the initial gray.

How can it be fixed, preferably with CSS only?

解决方案

Simply remove the 100% state from the animation and the color defined in the element will be used.

.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>

The initial value for background color is transparent. So you will first fade to transparent and then you will get back to the defined color when the animation is done. That's why it works fine with non colored tr.

---

If a 100% or to keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.^ref

这篇关于条纹桌上的褪色背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！