JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<h2>
 Animate Contents
</h2>
<p>
Slide in. Requires DOM changes to add divs or divs must be in the template. Still does not account for cell padding... working on animating CSS padding.
</p>
<table id="t2">
<tr>
  <th>Name</th>
  <th>Word</th>
</tr>
<tr>
  <td>Abel</td>
  <td>Antidisestablishmentarianism</td>
</tr>
<tr>
  <td>Betty</td>
  <td>Balaclava</td>
</tr>
<tr>
  <td>Cassius</td>
  <td>Cello</td>
</tr>
<tr class="toggle hidden">
  <td>Dan</td>
  <td>Diplodocus</td>
</tr>
<tr class="toggle hidden">
  <td>Ester</td>
  <td>Extraneous</td>
</tr>
<tr class="">
  <td>Frank</td>
  <td>Food</td>
</tr>
</table>

<button id="b2">Toggle</button>

CSS

table {
  border-collapse: collapse;
}

button { 
  padding: 1em 2em;
  margin: 1em;
}

th, td {
  padding: .25em .75em;
  border: 1px solid navy;
  -moz-transition: all .4s linear;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

tr.prehide th,
tr.prehide td,
tr.hidden th,
tr.hidden td {
  padding-top: 0;
  padding-bottom: 0;
}

.cellAnim {
  -moz-transition: all .4s linear;
  -webkit-transition: all .4s linear;
  transition: all .4s linear;
}

tr.prehide .cellAnim {
  height: 0;
  overflow: hidden;
}

.hidden { display: none !important; }

JavaScript

$('#b2').on('click.toggle', function(e) {
	var $rows = $('#t2').find('tr.toggle');
  
  // Add innerWrap to cells that don't have it.
  var $cells = $rows.children('th,td');
  var $nofix = $cells.children('.cellAnim').parent();
  $cells.not($nofix).wrapInner('<div class="cellAnim" />');
  
  if ($rows.filter('.hidden').length) {
  	
    // Turn off the hidden class
    // & add the zero-margin top/bottom "prehide"
    $rows
      .removeClass('hidden')
      .addClass('prehide');
    
    // Remove the prehide class to start the CSS transition
 		setTimeout(function(){
    	$rows.removeClass('prehide');
    },0)
 
  } else {
    // Shrink
  	$rows.addClass('prehide');
    
    setTimeout(function(){
    	$rows.addClass('hidden').removeClass('prehide');
    }, 400);
  }
});