javascript - Javascript リスト アイテムのアニメーション

Question

クラスがロードされてドキュメントに追加されると、クラスがリスト項目から削除される非常に基本的なアニメーションに取り組んでいます。私が抱えている問題は、アニメーション自体にあります。下の画像のようにアニメーションを段階的に実行したいのですが...

実際には、ループは完全に実行され、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 メソッドを使用してみました。

ありがとうございました。