Working on a simple animation involves removing classes from list items once they are loaded and added to the document. However, I am encountering issues with the animation execution. I aim for a stepped animation pattern as depicted below...
https://i.sstatic.net/kMMtP.gif
The problem is that while the console.log messages are displayed in a stepped manner during the loop, the removal of classes occurs simultaneously once the loop completes. How can I alter this behavior? Why do the console.log messages step through but the classList.remove action does not?
Below is the code snippet...
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
/**/
function showListItems() {
var listItems = document.querySelector('.idList');
var n = 20;
var c = 0;
var itemArray = new Array();
for (var i = 0; i < listItems.children.length; i++) {
var item = listItems.children[i];
if (item.classList && item.classList.contains('idList__item--hide')) {
console.log('Item: ', item);
itemArray[c] = item;
c++;
}
}
console.log('Item Array: ', itemArray);
itemArray.forEach(function(el, index) {
sleep(n);
el.classList.remove('idList__item--hide');
console.log("EL[" + index + "]: ", el);
});
}
I understand the complexity of this code and have tried various approaches such as promises, for loops, and the forEach method.
Your assistance is greatly appreciated.