Velocity JS и динамически добавленные элементы DOM

Question

У меня есть две CodePens, которые описывают мою проблему. Я использую Velocity для анимации элементов, отображаемых на странице.

• Working CodePen
• Non-working CodePen

Цель состоит в том, чтобы переместить эти "статьи" вверх и вниз страницы на основе ранга. Они абсолютно позиционируются, и я определяю позицию на странице на основе rank * height.

working example успешно отображает все элементы, а затем после setTimeout из 2 секунд он меняет порядок.

Предполагается, что non-working example будет делать то же самое, но единственный, который он перемещает по странице, является конечным объектом DOM (id=article-5).

Единственное различие между примерами является то, что working example уже оказанные DOM элементов на странице, в то время как non-working example делает HTML с помощью JavaScript

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, по крайней мере, пыталась анимировать объект, но, похоже, провалилась по пути где-то.

Любые идеи?

Answer 1

Когда вы делаете articlesContainer.innerHTML = newHTML, вы размонтируете все узлы в статьях Контейнер и устанавливаете новые. Таким образом, 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); 
}