javascript - CSS 在加载时临时更改行的背景颜色。

Question

我发现有很多示例使用各种方法(例如过渡和动画)来实现类似的效果，但似乎没有任何效果适合我的特定用例。我希望能够在加载页面时临时突出显示/更改元素的背景颜色。当在元素的 :hover 上使用 eas-in-out 过渡将鼠标悬停在行上时，我已经得到了这个特别的工作，它工作得很好，但我似乎无法让它在页面加载时工作。

具体来说，我需要我选择的特定行(我已经使用 JS)在页面加载时闪烁一次，仅此而已。如何将此 css 添加到我的行中？

这是我用于悬停的代码:

.FoodConsumptionTable tr {
    background-color: white;
    transition: background-color .75s ease-in-out;
   -moz-transition: background-color .75s ease-in-out;
   -webkit-transition: background-color .75s ease-in-out;
}

.FoodConsumptionTable tr:hover {
    background-color: #d2f9f3;
}

以下是我如何选择正确的行以尝试突出显示它:

var newRowId = $('#<%=hdnNewRowID.ClientID %>').val();        
$("input:hidden[value='" + newRowId + "']").eq(1).parent().parent().addClass("NewGridRow");

Answer 1

最简单的方法是使用 animation.加载元素和 CSS 后，动画将立即播放。

html, body {
  background-color: #333;
}

@keyframes FadeIn {
  from {
    background-color: #d2f9f3;
  }
  
  to {
    background-color: white;
  }
}

.FoodConsumptionTable tr {
    background-color: white;
    animation: FadeIn 0.75s ease-in-out forwards;
}

<table class="FoodConsumptionTable">
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Orange</td>
      <td>Banana</td>
    </tr>
  </tbody>
</table>

不同于transitions , 动画不需要改变状态来触发它们的变化。