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 是不够的，因为我不会在任何地方使用删除活动 class。classList.remove.I 也知道切换。

Answer 1

你可以试试下面的方法:-

setTimeout 一个就够了。我们将添加新class到当前元素并删除class 前一个元素.

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>

JavaScript: 一次一个地依次对列表项进行动画处理

JavaScript: animate list item sequentially one at a time repeatedly

html

javascript

css

settimeout

setinterval