JQuery removeClass mit CSS Animations

Question

Ich habe folgende CSS-Regel für Tabellenzeile Hintergrund,

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

Ich möchte von tr die .unread Klasse entfernen mit Animation ausblenden (ohne Javascript/Jquery wenn möglich) nicht funktioniert. Aber es entfernt nur die Klasse ohne jede Animation.

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

Irgendwelche Ideen?

Answer 1

Transition Regeln müssen auf dem tr Element definiert werden:

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