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

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 {

  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;

}