How to animate toggling of table rows? : <p>I want to animate the appearance and disappearance of table rows.</p>

<p>First of all I tried using a CSS <em>transition</em>, but it did nothing due to the change of the <code>display</code> property.</p>

<p>So I used an <em>animation</em>, which works as expected.</p>

<p>The problem is, <strong>the full height of the row is reserved when the animation begins</strong>. See the snippet below for an illustration of the problem: Row 3 is pushed down straight away, before the animation begins.</p>

<p><strong>How can I animate the height of the row progressively, so that it only takes as much space as needed?</strong></p>

<p>And as a bonus:</p>

<ul>
<li>it should <strong>not require a fixed height</strong> for rows</li>
<li>it should appear as a translation, rather than a scaling; it should look like it's <strong>sliding from the bottom of the row above it</strong></li>
<li>it should be <strong>bidirectional</strong> (do the opposite when I hide it)</li>
</ul>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('button').on('click', function() {
  $('tr:nth-child(2)').toggleClass('active');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes anim {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
tr {
  background: #eee;
  border-bottom: 1px solid #ddd;
  display: none;
  transform-origin: top;
}
tr.active {
  display: table-row;
  animation: anim 0.5s ease;
}
td {
  padding: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;button type="button"&gt;Toggle&lt;/button&gt;
&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr class="active"&gt;
      &lt;td&gt;Row 1&lt;/td&gt;
      &lt;td&gt;...&lt;/td&gt;
      &lt;td&gt;...&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Row 2&lt;/td&gt;
      &lt;td&gt;...&lt;/td&gt;
      &lt;td&gt;...&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="active"&gt;
      &lt;td&gt;Row 3&lt;/td&gt;
      &lt;td&gt;...&lt;/td&gt;
      &lt;td&gt;...&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>
