我有两个 CodePen 来描述我的问题。我正在使用 Velocity 为页面上的 React 渲染元素设置动画。
目标是根据排名在页面上上下移动这些“文章”。它们是绝对定位的，我根据 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 至少尝试为对象设置动画，但似乎在某个地方失败了。
有什么想法吗？
最佳答案
当您执行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);
}
关于javascript - Velocity JS 和动态添加的 DOM 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30397261/