目前,我有一张 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;
}
最佳答案
试试这个
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;
}
关于javascript - 仅在表格数据动画期间隐藏垂直滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56431677/