Скрыть вертикальную полосу прокрутки только во время анимации данных таблицы

Question

В настоящее время у меня есть таблица (пример stackblitz) , которая постепенно исчезает снизу вверх. Несмотря на то, что это происходит, появляется полоса прокрутки, так как высота таблицы увеличивается при уменьшении, а высота уменьшается, поэтому она скрывает ее после анимации.

   .table-data {
      border: 1px solid;
      height: 400px;
      overflow: auto;
    }

Я хочу это

переполнение будет автоматическим

, поскольку могут быть случаи, когда данные в таблице достаточно длинны, чтобы полоса прокрутки была видна.

Есть ли способ, которым мы можем сделать это в TypeScript?

Где я могу скрыть переполнение только во время анимации, используя:

.ease-in-up {
  animation: fadeInUp 5s;
  **overflow: hidden;**
}

HTML:

<div class="table-data">
  <table class="ease-in-up">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr><tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr><tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
  </table>
</div>

CSS:

.ease-in-up {
  animation: fadeInUp 5s;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.table-data {
  border: 1px solid;
  height: 400px;
  overflow: auto;
}

Answer 1

Попробуйте это

p {
  font-family: Lato;
}
.ease-in-up {
  animation: fadeInUp 5s;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes hiddenState {
  0% {
    overflow: hidden;
  }

  100% {
    overflow: auto;
  }
}

.table-data {
  border: 1px solid;
  height: 400px;
  overflow: auto;
  animation: hiddenState 5s;
}