Velocity JS 和动态添加 DOM 元素

Question

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

objective 是根据排名将这些 "articles" 在页面上上下移动。它们是绝对定位的，我根据rank * height.

来确定在页面上的位置

working example 成功显示了所有元素，然后在 setTimeout 2 秒后颠倒顺序。

non-working example 应该做完全相同的事情，但它唯一在页面上移动的是最终的 DOM 对象 (id=article-5)。

示例之间的唯一区别是 working example 已经在页面上呈现 DOM 元素，而 non-working example 通过 [= 呈现 HTML 48=]

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 至少尝试设置对象的动画，但似乎在某处失败了。

有什么想法吗？

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 元素

Velocity JS and Dynamically Added DOM Elements

javascript

animation

reactjs

velocity.js