javascript - 动画交叉淡入淡出表格单元格/行？

Question

我想知道是否有一种方法可以淡出表格的行或单元格，同时淡出替换内容，而不会创建几乎重复的表格或表格中的表格等。

这是我尝试执行的表更改类型的示例:

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>

但由于各种原因(绝对定位扰乱页面流、冗余内容、分配多个事件监听器、内容布局重新排列等)，这显然不是很好。

Answer 1

淡入淡出动画在表格中不起作用。您已经使用了创建表中的 div。例如

<div class=table>
  <div class=row>
    <div class=col></div>
    <div class=col></div>
  </div>
</div>

$('.col').click(function() {this.fadeOut(); }) ;