javascript - 带有CSS动画的Jquery removeClass不起作用

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

我想从 tr 中删除带有淡出动画的 .unread 类(如果可能，不使用 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>