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);
  });
}

我意识到这段代码可能看起来很复杂，也许确实如此，但是我已经尝试了所有我能想到的东西。我已经尝试过使用promises，for循环，现在使用forEach方法。

谢谢。

Answer 1

这可能是一种不好的方法，但是应该可以解决您的问题。

您可以在forEach中使用setTimeout（），并使用index来更改时间参数，就像这样：

itemArray.forEach(function(el, index) {
    setTimeout(function(){
         el.classList.remove('idList__item--hide')
    },500*(index+1)) 
});

Answer 2

在javascript完成运行之前，浏览器不会更新。您的脚本在休眠时不会将控制权交还给浏览器，因此浏览器无法更新。这正是task_struct的目的。

更改

setTimeout

到

itemArray.forEach(function(el, index) {
    sleep(n);
    el.classList.remove('idList__item--hide');
    console.log("EL[" + index + "]: ", el);
});

我们预先安排了所有itemArray.forEach(function(el, index) { const ms = n * (index + 1); setTimeout(function() { el.classList.remove('idList__item--hide'); console.log("EL[" + index + "]: ", el); }, ms); }); 调用，这就是为什么我们将remove乘以n。

如果您有兴趣，这是我用来测试index + 1和sleep的代码。 https://codepen.io/rockysims/pen/jeJggZ

Answer 3

我分别使用Jquery和setTimeout函数来链接动画。

$( "li" ).each(function( index ) {
    var listItem = $( this );
    setTimeout(function() {
      listItem.animate({
      opacity: 1
    }, 500); 
    }, (index + 1) * 500);
    
});

ul {
  padding : 20px;
}
ul li {
  list-style : none;
  height : 50px;
  background-color : lightgreen;
  margin : 20px;
  opacity : 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Hello world 1</li>
<li>Hello world 2</li>
<li>Hello world 3</li>
<li>Hello world 4</li>
</ul>