title: How to animate toggling of table rows?
body: <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>