Jquery removeClass与css动画不起作用

Question

我有关于表行背景的css规则,

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;
 }

我希望.unread从tr淡出动画中删除该类(如果可能,不使用Javascript/Jquery).但它只是删除了没有任何动画的类.

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

有任何想法吗 ？

Answer 1

必须在元素上定义转换规则tr：

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