Удалите задержку в разворачивании / свертывании строки таблицы в угловых 7

Question

Когда я использую таблицы, есть задержка в расширении / свертывании аккордеонов. Открытие и закрытие также аккордеонов не являются гладкими. Есть много решений, представленных в Интернете, но ни одно из этих решений не подходит для моей задачи. Некоторые решения используют jquery, но, насколько это возможно, мы будем применять методы с использованием CSS, HTML и / или Angular. Пожалуйста, помогите мне ...

Вот следующее решение, которое я попробовал: - заключить td в div - использовать методы перехода, например, переход: flex 0.3s ease-out;- установка отступа свертываемого элемента на 0

At component.ts

values = [{label: label1, content: content1},{label: label2, content: content2}]

At component.html

<table>
 <thead>
  <tr>
    <th>heading 1</th>
    <th>heading 2</th>
   </tr>
 </thead >

 <tbody id="accordion" *ngFor = "let value of values">

   <tr data-toggle="collapse" data-target="#collapseOne" aria-expanded="true">
    <td>{{ value.label}}</td>
    <td>{{ value.label}}</td>
   </tr>

   <tr class="collapse section" id="collapseOne">
    <td><div style="padding: 0;"> {{ value.content}} </div></td>
    <td><div style="padding: 0;"> {{ value.content}} </div></td>
   </tr>

 </tbody>
</table>

At component.css

.section {
    overflow: hidden;
    height: auto;
    flex: 1;
    -moz-transition: height .3s;
    -ms-transition: height .3s;
    -o-transition: height .3s;
    -webkit-transition: height .3s; 
    height: auto;
    padding: 0rem;
}

.section.collapsed {
    flex: 0;
}

Ожидаемый результат заключается в том, что сжатие и расширение строки происходит плавно и без задержки