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

我使用 Jquery each 和 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>

Answer 2

这可能是一个糟糕的方法，但它应该可以解决您的问题。

你可以在forEach中使用setTimeout()，使用index来改变时间参数，点赞：

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

Answer 3

浏览器不会更新，直到 javascript 完成运行。您的脚本在休眠时不会将控制权交还给浏览器，因此浏览器无法更新。这正是 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 与 setTimeout 的代码。 https://codepen.io/rockysims/pen/jeJggZ

Javascript 列表项动画

Javascript List Item Animations

javascript

step

jquery-animate