¿Cómo animar la alternancia de filas de la tabla?

Quiero animar la aparición y desaparición de las filas de la tabla.

Primero que nada intenté usar un CSStransición, pero no hizo nada debido al cambio dedisplay propiedad.

Entonces usé unanimación, que funciona como se esperaba.

El problema es,la altura completa de la fila está reservada cuando comienza la animación. Vea el fragmento a continuación para ver una ilustración del problema: la fila 3 se empuja hacia abajo inmediatamente, antes de que comience la animación.

¿Cómo puedo animar la altura de la fila de forma progresiva, de modo que solo ocupe tanto espacio como sea necesario?

Y como extra:

deberíano requiere una altura fija para filasdebería aparecer como una traducción, en lugar de una escala; debería verse como si fueradeslizándose desde la parte inferior de la fila por encima de elladebería serbidireccional (haz lo contrario cuando lo oculto)

$('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>