使用setInterval设置Animate函数

Question

请检查这段代码我尝试了大部分用于动画这个小提琴的东西。 我想在move类中添加margin-left: 25%类，使用getservbyport进行动画处理。

https://jsfiddle.net/o00nu4w8/

Answer 1

问题是您在添加类后会立即尝试删除该类，从而导致动画在您执行此操作时不显示

setInterval(function() {
      lis[c].classList.add('move');
      c++;
      lis[c-1].classList.remove('move')
      if (c === lis.length) {
        c = 0;
      }
}, 3500)

但是如果你这样做

setInterval(function() {
      if(lis[c-1]) lis[c-1].classList.remove('move')
      lis[c].classList.add('move');
      c++;
      if (c === lis.length) {
        c = 0;
      }
}, 3500)

它会等到下一个时间间隔才能移除＆＃39;移动＆＃39;类，让你看到它的动画进出

Answer 2

你可以使这更简单。问题是删除类太早了，但是你可以删除所有动画结束时的类，对于所有元素，并重新开始：

let lis = document.querySelectorAll('li')
let c = 0;

setInterval(function() {
      lis[c].classList.add('move');
      c++;

      if (c === lis.length) {
      lis.forEach(function(el) {
      el.classList.remove('move');
      });
        c = 0;
      }
}, 3500)

演示：

＆＃13;

＆＃13;

let lis = document.querySelectorAll('li')
let c = 0;

setInterval(function() {
      lis[c].classList.add('move');
      c++;
    
  
      if (c === lis.length) {
      lis.forEach(function(el) {
      el.classList.remove('move');
      });
      	c = 0;
      }
}, 3500)

＆＃13;

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.yellow {
  background-color: yellow;
}
.blue {
  background-color: blue;
}

.slideshow {
   width: 350px;
   height: 200px;
   overflow: hidden;
   border: 3px solid #F2F2F2;
}

.slideshow ul {
    /* 4 images donc 4 x 100% */
   width: 400%;
   height: 200px;
   padding:0; margin:0;
   list-style: none;
   transition: 2s;
}
.slideshow li {
   float: left;
   width: 25%;
   height: 200px;
   transition: .5s;
}
.move {
  margin-left: -25%;
  transition: .5s;
}

＆＃13;

<div class="slideshow">
	<ul>
		<li class='red'></li>
		<li class='green'></li>
		<li class='yellow'></li>
		<li class='blue'></li>
	</ul>
</div>

＆＃13;

＆＃13;

＆＃13;