淡入/淡出斑马条纹表的突出显示

Question

我有一个包含许多数据行的表，它使用以下 CSS 进行了斑马条纹：

#datatable tr:nth-child(odd) {
background-color: #fff;
}

#datatable tr:nth-child(even) {
background-color: #fafafa;
}

表中的数据通过 ajax 调用不断更新，我想为数据已更改的特定行添加临时突出显示。

我想要这种新颜色（如果数据值减少，则为红色，如果数据值增加，则为绿色），很好地淡入，停留一两秒钟，然后再次淡出到原始行颜色。

我刚刚使用 jQuery 和 CSS 进行了这项工作；

$('#row_id').addClass("temphighlight");
setTimeout(clearHighlighting, 3000);

function clearHighlighting(){
$("#row_id").removeClass("temphighlight");
}

#datatable tr.temphighlight {
background-color: #c6efce;
transition: background 1.0s ease;
}

这适用于淡入，但延迟后，CSS类立即被移除，没有淡出。

我怎样才能让这个突出显示有更好的效果，它淡入和淡出？

我检查了几个类似的 SO 问题，但答案要么不起作用，要么不适用 - 例如建议您将淡入淡出设置为白色，这对我不起作用，因为我的行的颜色不同由于行条带化。

Answer 1

你可以改变不透明度

myFunction();
var val = 1.0;
function myFunction() {

val -= 0.02;
    $('.myDiv').css("opacity", val);
    setTimeout(myFunction, 20);
}

https://codepen.io/piscu/pen/LOzNqa

Answer 2

这是怎么回事？您可以更改要添加到 pulseUp 或 pulseDown 的类，具体取决于值是上升还是下降。

尝试单击提供的示例中的元素。

$("td").click(function() {
	var element = this;
  $(element).addClass("pulseUp");
  setTimeout(function () {
       $(element).removeClass("pulseUp");
  },500);
});

#datatable tr:nth-child(odd) {
background-color: #fff;
}

#datatable tr:nth-child(even) {
background-color: #fafafa;
}

.pulseUp{
  animation-name: pulseUp;
  animation-duration: 0.5s;
  animation-timing-function: ease;
}

.pulseDown {
  animation-name: pulseDown;
  animation-duration: 0.5s;
  animation-timing-function: ease;
}

@keyframes pulseUp {
  50% {
    background-color: green;
  }
}

@keyframes pulseDown {
  50% {
    background-color: red;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datatable">
  <tr>
    <td>1</td>
    <td>2</td> 
    <td>3</td>
  </tr>
    <tr>
    <td>hello</td>
    <td>mr</td> 
    <td>Smith</td>
  </tr>
    <tr>
    <td>Goodbye</td>
    <td>Sir</td> 
    <td>Smith</td>
  </tr>
</table>

Answer 3

只需将过渡放在未从元素中删除的规则上。

setTimeout(function() {
  $('#row_id').addClass("temphighlight");
  setTimeout(clearHighlighting, 3000);
}, 2000);

function clearHighlighting() {
  $("#row_id").removeClass("temphighlight");
}

#datatable tr {
  transition: background 2.0s ease;
}

#datatable tr:nth-child(odd) {
  background-color: #fff;
}

#datatable tr:nth-child(even) {
  background-color: #fafafa;
}

#datatable tr.temphighlight {
  background-color: #c6efce;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datatable">
  <tr>
    <td>One</td>
  </tr>
  <tr>
    <td>Two</td>
  </tr>
  <tr id="row_id">
    <td>Three</td>
  </tr>
  <tr>
    <td>Four</td>
  </tr>
</table>

Answer 4

这样的？

.table{
  border: 1px solid #eee;
}

.table .row{
  padding: 10px;
  box-sizing: border-box;
}

.table .row:nth-child(odd) {
background-color: #fff;
}

.table .row:nth-child(even) {
background-color: #fafafa;
}

.table .row.increased{
  animation: 1s increased;
}

.table .row.decreased{
  animation: 1s decreased;
}

@keyframes increased{
  0%{
    background: initial;
  }
  50%{
    background: #a2ffa9;
  }
  100%{
    background: initial;
  }
}

@keyframes decreased{
  0%{
    background: initial;
  }
  50%{
    background: #ff6f6f;
  }
  100%{
    background: initial;
  }
}

<div class="table">
  <div class="row increased">
  row
  </div>
  <div class="row">
  row
  </div>
  <div class="row">
  row
  </div>
  <div class="row decreased">
  row
  </div>
</div>