Question

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

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

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

表中的数据通过ajax调用不断更新，我想在数据发生变化的特定行中添加临时突出显示。

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

我现在正在使用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

这样的东西？

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

Answer 2

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

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 3

这是怎么回事？您可以更改要添加到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 4

你可以改变不透明度

    SELECT 1,table_name,3,4,5,6,7,8 
    FROM (
       SELECT * 
       FROM (
          SELECT table_name 
          FROM all_tables 
          ORDER BY 1) 
       WHERE rownum <= 1) subname 
    ORDER BY 1 desc;

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

淡入/淡出斑马条纹表

4 个答案: