Question

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

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

working example成功显示所有元素，然后在setTimeout 2秒后反转订单。

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);
}

Velocity JS和动态添加的DOM元素

1 个答案: