2

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

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

工作示例成功显示所有元素，然后在2setTimeout秒后反转顺序。

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

示例之间的唯一区别是工作示例在页面上已经渲染了 DOM 元素，而非工作示例通过 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 个未能动画化的元素都有 class velocity-animating，这意味着 Velocity 至少尝试过为对象设置动画，但似乎在某个地方失败了。

有任何想法吗？

4

1 回答 1

2

当您这样做时articlesContainer.innerHTML = newHTML，您将卸载 articleContainer 中的所有节点并安装新节点。因此，Velocity/React 在分离的节点上运行，除了最后一个文章节点，它是唯一没有卸载的节点。使用document.createElementandnode.appendChild代替：

var articlesContainer = document.getElementsByClassName('articles')[0];
for (var i = 1; i <= 5; i++) {
  var div = document.createElement('div');
  articlesContainer.appendChild(div);
}
于 2015-05-22T13:32:41.003 回答