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

Question

目前，我有一张 table (stackblitz example)从下到上淡入。当它发生时，当表格高度在淡入和高度减小时增加时，滚动条可见，因此它在动画后隐藏它。

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

我要这个

overflow to be auto

因为在某些情况下，表格中的数据可能足够长，以至于滚动条可见。

Is there a way we can do it in TypeScript?

我只能在动画期间 overflow hidden ，使用:

.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;
}