我正在制作一个非常基本的动画,其中一旦加载并附加到文档中,就会从列表项中删除类。我遇到的问题是动画本身。我希望动画以如下图的方式执行...
实际上,虽然循环完全运行,console.log 消息以逐步的方式输出,但是一旦循环完成,所有类都会同时被删除。我怎样才能改变这种行为?为什么会逐步执行 console.log 消息,但不会同时执行 classList.remove 功能?
这是我的代码...
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);
});
}
我意识到这段代码可能看起来很复杂,也许确实如此,但我已经尝试了我能想到的一切。我尝试过使用 Promise、for 循环,现在是 forEach 方法。
谢谢你。