Я хочу анимировать появление и исчезновение строк таблицы.

Прежде всего я попробовал использовать CSSпереход, но это ничего не сделало из-за измененияdisplay имущество.

Поэтому я использоваланимация, который работает, как ожидалось.

Проблема в,полная высота строки зарезервирована, когда начинается анимация, См. Фрагмент кода ниже для иллюстрации проблемы: строка 3 сдвигается вниз непосредственно перед началом анимации.

Как можно постепенно оживить высоту строки, чтобы она занимала столько места, сколько необходимо?

И в качестве бонуса:

должноне требует фиксированной высоты для строкон должен выглядеть как перевод, а не как масштабирование; это должно выглядеть такскользя от нижней части ряда над нимтак должно бытьдвунаправленный (делай наоборот, когда я это скрываю)

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