仅在表格数据动画期间隐藏垂直滚动条

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>

Answer 1

试试这个p {&nbsp; font-family: Lato;}.ease-in-up {&nbsp; animation: fadeInUp 5s;}@keyframes fadeInUp {&nbsp; 0% {&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; transform: translateY(30px);&nbsp; }&nbsp; 100% {&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; transform: translateY(0px);&nbsp; }}@keyframes hiddenState {&nbsp; 0% {&nbsp; &nbsp; overflow: hidden;&nbsp; }&nbsp; 100% {&nbsp; &nbsp; overflow: auto;&nbsp; }}.table-data {&nbsp; border: 1px solid;&nbsp; height: 400px;&nbsp; overflow: auto;&nbsp; animation: hiddenState 5s;}