Question

目前，我有一张桌子(stackblitz example)，它从下到上逐渐消失。发生这种情况时，随着淡入时桌子高度的增加和高度的减小，有一个滚动条可见，因此它会在动画之后隐藏。

> SELECT * FROM mytable
  userid  submissionid
-------- -------------
       1             1
       2             2
       1             3
       1             4
       3             5

> COUNT(DISTINCT userid) -- ERROR:    Returns 5 when data source is PostgreSQL
> COUNT(DISTINCT userid) -- EXPECTED: Returns 3 when data source is CSV (exported from same PostgreSQL query above)

我想要这个

自动溢出

在某些情况下，表中的数据足够长，滚动条才可见。

有没有办法在TypeScript中做到这一点？

我只能在动画中隐藏溢出的地方，使用：

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

HTML：

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

CSS：

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

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

1 个答案: