JavaScript：一次一个地重复地为列表项设置动画

Question

我正在尝试一次一个地重复地为列表项设置动画。我有一个包含一些列表项的列表。我想要做的是使用 javascript 一次为每个列表项设置一个动画。当动画下一个项目时，我还必须从上一个项目中删除动画。问题是我不习惯 setIntervals 或 setTimeout 函数。我是 javascript 的初学者。

  const ThumbnailSlider = document.querySelectorAll('.thumbnail-slider li');

    setInterval(() => {
      ThumbnailSlider.forEach( (item, i) => {
      const ms = (i+1) * 2000;
      setTimeout(() => {
        item.classList.add('active')
      }, ms);
    });
    }, 2000);

  .thumbnail-slider {
     position: relative;
     height: 100%;
     width: 100%;
     }
    .thumbnail-slider li {
     position: relative;
     height: 100%;
     width: 100%;
     }
     .thumbnail-slider li.active {
     background: cyan;
     }

    <ul class="thumbnail-slider">
            <li>list item one</li>
            <li>list item two</li>
    </ul>



  



  

我知道这个 javascript 是不够的，因为我没有使用 .classList.remove 在任何地方删除活动类。我也知道切换。

Answer 1

您可以尝试以下方法：-

setTimeout 就足够了。我们将为当前元素添加新类并删除上一个元素的类。

const ThumbnailSlider = document.querySelectorAll('.thumbnail-slider li');

let previousItem;
function animate(){
  ThumbnailSlider.forEach( (item, i) => {
  const ms = (i+1) * 2000;
  setTimeout(() => {
    previousItem?.classList.remove('active');
    item.classList.add('active')
    previousItem = item;
    if(i===ThumbnailSlider.length-1){
    animate();
    }
  }, ms);
});
}

animate();

.thumbnail-slider {
 position: relative;
 height: 100%;
 width: 100%;
 }
.thumbnail-slider li {
 position: relative;
 height: 100%;
 width: 100%;
 }
 .thumbnail-slider li.active {
 background: cyan;
 }

<ul class="thumbnail-slider">
        <li>list item one</li>
        <li>list item two</li>
        <li>list item third</li>
        <li>list item fourth</li>
        <li>list item fifth</li>
</ul>