我有两个CodePens描述我的问题。我正在使用Velocity为页面上的React渲染元素设置动画。
目的是根据等级将这些“文章”在页面上上下移动。它们是绝对定位的，我根据确定了页面上的位置rank * height。
该工作示例成功显示了所有元素，然后在setTimeout2秒钟后反转了顺序。
这个不起作用的示例应该做完全相同的事情，但是它在页面中移动的唯一一个是最终的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至少尝试了对对象进行动画处理，但是似乎在某个地方失败了。
有任何想法吗？
当您这样做时articlesContainer.innerHTML = newHTML，您将卸载articleContainer中的所有节点并安装新的节点。因此，“速度/反应”在分离的节点上进行操作，但最后一个商品节点是唯一未卸载的节点。使用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);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句