速度JS和动态添加DOM元素

Question

我有两个CodePens来描述我的问题。我正在使用速成动画反应渲染元素在一个页面上。

• 工作CodePen
• 非工作CodePen

目标是根据排名上下移动这些“文章”。它们是绝对定位的，我根据rank * height确定页面上的位置。

工作实例成功地显示了所有元素，然后在2秒的setTimeout之后，它将颠倒顺序。

非工作实例应该做同样的事情，但是它在页面周围移动的唯一一个是最终的DOM对象(id=article-5)。

示例之间唯一的区别是，工作实例已经在页面上呈现了DOM元素，而非工作实例则通过JavaScript呈现JavaScript。

var articlesContainer = document.getElementsByClassName('articles')[0];
for (var i = 1; i <= 5; i++) {
  articlesContainer.innerHTML = articlesContainer.innerHTML + '<div id=article-' + i + '></div>';
}

不太清楚为什么HTML元素的动态添加会破坏这一点。值得注意的是，前4个没有动画的元素都有类velocity-animating，这意味着速度至少尝试了动画对象，但似乎在某个地方失败了。

有什么想法吗？

Answer 1

当您执行articlesContainer.innerHTML = newHTML时，您正在卸载articlesContainer中的所有节点并挂载新节点。因此，速度/反应在分离的节点上运行，除了最后一个项目节点，它是唯一没有卸载的节点。改用document.createElement和node.appendChild：

var articlesContainer = document.getElementsByClassName('articles')[0];
for (var i = 1; i <= 5; i++) {
  var div = document.createElement('div');
  articlesContainer.appendChild(div);
}