动画交叉淡化表格单元格/行？

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

淡入淡出动画在表格中不起作用。你已经使用了create table中的div。例如

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

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