JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr class="odd"><td>A</td></tr>
    <tr><td>B</td></tr>
    <tr class="odd"><td>C</td></tr>
    <tr><td>E</td></tr>
</table>

<button onclick="window.show()">Show</button>
<button onclick="window.hide()">Hide</button>

CSS

table {
    width: 100%;
}

table tr {
    line-height: 50px;
    background: green;
}

table tr.odd {
    background: red
}

JavaScript

window.show = function() {
    $("table tr").hide().animate({ 'line-height': 'show' }, 5000);
}

window.hide = function() {
    $("table tr").animate({ 'line-height': 'hide' }, 5000);
}