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>