表行的转换效果

Question

我想在使用HTML表格布局呈现的数据页面之间移动时创建过渡效果。理想情况下，我想使用任何常规的jQuery UI转换，但是，它证明是困难的。

也就是说，如果我将效果应用于整个表格，一切都很好。但是，我不希望标题行受到影响，它应该保持静态，所以这没用。

将效果应用于<tbody>标记会导致无法预测的结果 - 在转换过程中，格式化会以不同的方式搞砸。

我可以将效果同时应用于所有表格行而不是包装元素 - 但这实际上只适用于均匀的效果（如简单的淡出/淡化）。

我可以将标题作为单独的表格，但很难确保列正确对齐，因此布局必须完全固定。这也不理想。

有没有更好的方法可以在不将表头与表格分开的情况下更好地完成这项工作，或者这是否是实现这一目标的唯一方法，并取得了良好的效果？

Answer 1

你没有发布代码来工作，所以我只能给你指示。但是，我建议您尝试以下方法：

• 将position: relative;应用于表的父元素（如果需要，添加一个），
• 复制<table>元素（不带其后代），
• 将position: absolute;和适当的z-index应用于新表格，使其保留在原始表格之上，
• 将标题行深度克隆，并将append()深色克隆到新表格
• 将新表附加到父元素，因此新的标题行将在动画期间屏蔽原始表格，
• 在原始<table>元素
上执行动画
• remove()新的<table>元素。