css - анимация в строке таблицы, как повлиять на высоту

Question

Я пытаюсь создать css анимацию, которая разворачивает строку таблицы. (Я не могу использовать div или что-то другое, кроме таблицы ..) Я использую transform: scale(1,0);, и он работает нормально, но я хочу, чтобы фактическая высота была анимированной, а не пустой оболочки, которая только заполнялась. попытался анимировать максимальную высоту, но это не оказало никакого влияния, также нашел этот ответ, но то же самое не оказало никакого влияния CSS высота строки таблицы перехода

<table>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr class="add-row-animation">
    <td>three</td>
    <td>for</td>
  </tr>
</table>

css:

table{
  border: 1px solid black;
  tr{
    td{
      border: 1px solid black;
    }
    &.add-row-animation{
          animation: addRow 2s 1 linear;
          transform-origin:  top;
            @keyframes addRow{
          0% {
            transform: scale(1, 0);
            background-color: #fff;
            visibility: collapse;

          }
          50%{
            background-color: orange;
            transform: scale(1,1);
            visibility: visible;
          }
          100% {
            background-color: #fff;
          }
        }
    }
  }
}

ссылка на jsfiddle - https://jsfiddle.net/z5Lhqbc4/

Answer 1

Вы должны использовать свойство line-height, чтобы изменить высоту строки таблицы:

table {
  border: 1px solid black;
}

table tr td {
  border: 1px solid black;
}

table tr.add-row-animation {
  transition-duration: 1s;
  animation: addRow 2s 1 linear;
  transform-origin: top;
}

@keyframes addRow {
  0% {
    transform: scale(1, 0);
    line-height: 0px;
    background-color: #fff;
    visibility: collapse;
  }
  50% {
    background-color: orange;
    transform: scale(1, 1);
    line-height: 18px; /* font-size(16px) + border-top(1px) + border-bottom(1px) */
    visibility: visible;
  }
  100% {
    background-color: #fff;
  }
}

<table>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr class="add-row-animation">
    <td>three</td>
    <td>for</td>
  </tr>
</table>