javascript - 网页的动 Canvas 局

Question

假设我有一个 html table其中单元格包含 span秒。某些操作会导致 div span s改变他们的位置，比如我重构表格转置。

考虑

<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副本。

有没有更好的办法？

Answer 1

如果我正确理解你的问题，使用 CSS transition 怎么样？属性(property)？

我认为您不需要创建整个表的副本并进行任何计算。

例如，假设您要向上移动更新的跨度。您可以定义一个包含必要填充的 CSS 类，如 my example 中所示。只需将该 CSS 类添加到您正在更新的跨度中即可。

像这样的单行 CSS，可以让您为 span 运动设置动画:

transition: all 0.5s ease;

编辑

在 this article by Tim Taubert 的帮助下，我能够为您的 fiddle 制作动画

You can find the updated fiddle here