假设我有一个 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
副本。
有没有更好的办法?
最佳答案
如果我正确理解你的问题,使用 CSS transition 怎么样?属性(property)?
我认为您不需要创建整个表的副本并进行任何计算。
例如,假设您要向上移动更新的跨度。您可以定义一个包含必要填充的 CSS 类,如 my example 中所示。只需将该 CSS 类添加到您正在更新的跨度中即可。
像这样的单行 CSS,可以让您为 span 运动设置动画:
transition: all 0.5s ease;
编辑
在 this article by Tim Taubert 的帮助下,我能够为您的 fiddle 制作动画
关于javascript - 网页的动 Canvas 局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32562681/