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

Question

I have a table with a number of data rows, which is zebra striped using the following CSS:

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

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

The data in the table is continually updated via ajax calls, and I want to add a temporary highlight to particular rows where data has changed.

I want this new colour (red if the data value has decreased, green if the data value has increased), to nicely fade in, stay for a second or two, then fade back out to the original row colour again.

I have this working just now using jQuery and 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;
}

This works for the fade in, but after the delay, the CSS class is removed immediately and there is no fade out.

How can I get this highlighting to have a better effect, where it fades in and also fades out?

I have checked several similar SO questions, but the answers either don't work or don't apply - such as suggestions that you animate a fade to white, which doesn't work for me because my rows are alternatively coloured differently due to the row striping.

Answer 1

Something like this?

 .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

Just put the transition on a rule that is not removed from the element.

 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

How's this? You can change the class to be added to either pulseUp or pulseDown dependent on if the value is going up or down.

Try clicking an element in the example provided.

 $("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

you can change opacity

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

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

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