Ich möchte das Erscheinen und Verschwinden von Tabellenzeilen animieren.

Zunächst habe ich versucht, ein CSS zu verwendenÜberleitun, aber es hat nichts aufgrund der Änderung derdisplay Eigentum

Also habe ich ein @ verwendAnimatio, was wie erwartet funktioniert.

Das Problem ist,die volle Höhe der Zeile ist reserviert, wenn die Animation beginnt. Das folgende Snippet veranschaulicht das Problem: Zeile 3 wird sofort nach unten verschoben, bevor die Animation beginnt.

Wie kann ich die Höhe der Zeile schrittweise animieren, sodass nur so viel Platz benötigt wird, wie erforderlich?

Und als Bonus:

es sollteeine feste Höhe erforderli für Zeilenit sollte als Übersetzung und nicht als Skalierung angezeigt werden. es sollte so aussehen, als wäre essliding vom unteren Rand der Zeile darüberes sollte sein bidirektional (mach das Gegenteil, wenn ich es verstecke)

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