Como animar a alternância de linhas da tabela?

Quero animar a aparência e o desaparecimento das linhas da tabela.

Primeiro de tudo, tentei usar um CSStransição, mas não fez nada devido à alteração dodisplay propriedade.

Então eu usei umanimação, que funciona conforme o esperado.

O problema é,a altura total da linha é reservada quando a animação começa. Veja o trecho abaixo para obter uma ilustração do problema: A Linha 3 é empurrada para baixo imediatamente, antes do início da animação.

Como posso animar progressivamente a altura da linha, para que ela ocupe apenas o espaço necessário?

E como um bônus:

deverianão requer uma altura fixa para linhasdeve aparecer como uma tradução, e não como uma escala; deve parecer que édeslizando da parte inferior da linha acima deladeveria serbidirecional (faça o oposto quando eu o escondo)

$('button').on('click', function() {
  $('tr:nth-child(2)').toggleClass('active');
});
@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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button type="button">Toggle</button>
<table>
  <tbody>
    <tr class="active">
      <td>Row 1</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr class="active">
      <td>Row 3</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

questionAnswers(2)

yourAnswerToTheQuestion