Jquery removeClass with css animation not working

Question

I have following css rule for table row background,

tr.unread {
    background:rgba(237, 239, 245, 0.70) none repeat scroll 0 0;
   -webkit-transition: background 1s linear;
   -moz-transition: background 1s linear;
   -o-transition: background 1s linear;
   transition: background 1s linear;
 }

I want to remove the .unread class from tr with fading out animation (without Javascript / Jquery if possible). But it just removes the class without any animation.

Javascript: $('tr.unread').removeClass('unread');

Any Ideas ?

Answer 1

Transition rules must be defined on the tr element:

$('button').click(function() {
  $('tr.unread').removeClass('unread');
});

tr {
    -webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    -o-transition: background 1s linear;
    transition: background 1s linear;
}
tr.unread {
    background: rgba(237, 239, 245, 0.70) none repeat scroll 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="unread">
        <td>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
        </td>
    </tr>
    <tr class="unread">
        <td>
            <td>Table Cell 1</td>
            <td>Table Cell 2</td>
        </td>
    </tr>
</table>

<button>Mark read</button>