速度JS和动态添加的DOM元素

Velocity JS and Dynamically Added DOM Elements

本文关键字：DOM 元素 添加 动态 JS 速度      更新时间：2023-09-26

我有两个copens来描述我的问题。我正在使用Velocity来动画页面上的react渲染元素。

    工作CodePen
  • 非工作CodePen

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

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

非工作的例子应该做完全相同的事情，但它在页面上移动的唯一一个是最终的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个未能动画的元素具有类velocity-animating，这意味着Velocity至少试图动画对象，但似乎在某个地方失败了。

任何想法?

当您执行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);
}
相关文章：