我想知道是否有一种方法可以淡出表格的行或单元格,同时淡出替换内容,而不会创建几乎重复的表格或表格中的表格等。
这是我尝试执行的表更改类型的示例:
document.querySelector('table').addEventListener('click', function () {
this.querySelector('#row1').classList.toggle('hidden')
this.querySelector('#row2').classList.toggle('hidden')
})
.hidden {
display: none;
}
<table border="1">
<tr id="row1">
<td colspan="4">Swap row</td>
</tr>
<tr id="row2" class="hidden">
<td>Hi</td>
<td colspan="3">there</td>
</tr>
<tr><td>This</td><td>is</td><td>an</td><td>example</td></tr>
<tr><td>example</td><td>an</td><td>is</td><td>This</td></tr>
</table>
Click the table.
在你说什么之前,我知道 display
属性不能设置动画。这个代码片段不是关于我的实现尝试(因为我不知道从哪里开始),更多的是关于我想要操作的内容类型。
我能够管理的最接近(视觉上)的是这样的:
document.querySelector('#table2').addEventListener('click', function () {
this.classList.toggle('hidden')
document.querySelector('#table3').classList.toggle('hidden')
})
document.querySelector('#table3').addEventListener('click', function () {
document.querySelector('#table2').classList.toggle('hidden')
this.classList.toggle('hidden')
})
.hidden {
transition: 1s;
opacity: 0;
}
#table2, #table3 {
position: absolute;
}
<table id="table2" border="1">
<tr>
<td colspan="4">Swap row</td>
</tr>
<tr><td>This</td><td>is</td><td>an</td><td>example</td></tr>
<tr><td>example</td><td>an</td><td>is</td><td>This</td></tr>
</table>
<table id="table3" border="1" class="hidden">
<tr>
<td>Hi</td>
<td colspan="3">there</td>
</tr>
<tr><td>This</td><td>is</td><td>an</td><td>example</td></tr>
<tr><td>example</td><td>an</td><td>is</td><td>This</td></tr>
</table>
但由于各种原因(绝对定位扰乱页面流、冗余内容、分配多个事件监听器、内容布局重新排列等),这显然不是很好。
最佳答案
淡入淡出动画在表格中不起作用。 您已经使用了创建表中的 div。 例如
<div class=table>
<div class=row>
<div class=col></div>
<div class=col></div>
</div>
</div>
$('.col').click(function() {this.fadeOut(); }) ;
关于javascript - 动画交叉淡入淡出表格单元格/行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54928399/