网页动画重新布局

Question

假设我有一个html table，其中单元格包含span s。一些动作会导致div span改变它们的位置，例如，我重建了转置的表格。

考虑

<table>
<tr>
    <td id='cell1'>1</td>
    <td id='cell2'>2</td>
</tr>
<tr>
    <td id='cell3'>3
        <div id='el'>foo</div>
    </td>
    <td id='cell4'>4</td>
</tr>

和

  setTimeout(function () {
       document.getElementById('cell2').appendChild(document.getElementById('el'))
  }, 2000);

如何设置span s位置变化的动画？

我对问题的第一个看法是创建隐藏的新表，在旧的表上，保存每个span的绝对位置，旧的和新的，放置span的绝对位置副本在旧版本之上，将它们设置为新位置，删除旧表格，显示新表格，最后删除绝对位置span副本。

有更好的方法吗？