Velocity JS和动态添加DOM元素

Question

我有两个描述我的问题的CodePens。我正在使用Velocity在页面上动画呈现React渲染的元素。

• Working CodePen
• Non-working CodePen

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

working example成功显示所有元素，然后在2秒钟的setTimeout后逆转顺序。

non-working example应该做同样的事情，但它在页面中移动的唯一一个是最终的DOM对象（id=article-5）。

的例子之间的唯一区别是，working example已经呈现在网页上的DOM元素，而non-working example通过JavaScript呈现HTML

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，这意味着Velocity至少试图为对象设置动画效果，但似乎在某处某处失败。

任何想法？

Answer 1

当您执行articlesContainer.innerHTML = newHTML时，您将卸载articlesContainer中的所有节点并安装新节点。因此Velocity/React在分离的节点上运行，除了最后一个文章节点（这是唯一未卸载的节点）之外。使用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); 
}