Javascript 为什么在使用removeClass（）和addClass（）将类删除并添加到同一元素时转换不起作用？

有两个图像，第一个具有

“opacityOne”

类，当单击按钮时，根据名为

index

的变量，我希望当前图像淡入淡出，另一个淡出

当从一个图像中删除并添加到另一个图像中时，

“opacityOne”

效果很好，但是当我想删除并添加

“opacityOne”

到同一个元素时，我看不到它起作用，也没有出现淡入淡出的情况。 我在想

transition

会起作用，因为我从元素中删除并添加了一个类，我不明白为什么它不起作用

如何通过删除和添加同一元素的类使其淡入淡出

HTML:

 <div class="sideImgContainer">
   <div class="imgs clearfix">
     <img src="pics/pcfullimage.png" class="firstImg opacityOne"/>
     <img src="pics/sideimage3.png" class="secondImg"/>
   </div>
 </div>

.sideImgContainer img{
   transition: all 1.2s;
   opacity: 0;
 }
 .sideImgContainer .opacityOne{
   opacity:1;
 }

prevBut.click(moveSlide);
nextBut.click(moveSlide);

function moveSlide(){
   secondImg.removeClass("opacityOne");
   firstImg.removeClass("opacityOne");

  if(index === 2 || index === 0){
     firstImg.addClass("opacityOne");
     }
  else{
     secondImg.addClass("opacityOne");
  }
}

jQuery:

 <div class="sideImgContainer">
   <div class="imgs clearfix">
     <img src="pics/pcfullimage.png" class="firstImg opacityOne"/>
     <img src="pics/sideimage3.png" class="secondImg"/>
   </div>
 </div>

.sideImgContainer img{
   transition: all 1.2s;
   opacity: 0;
 }
 .sideImgContainer .opacityOne{
   opacity:1;
 }

prevBut.click(moveSlide);
nextBut.click(moveSlide);

function moveSlide(){
   secondImg.removeClass("opacityOne");
   firstImg.removeClass("opacityOne");

  if(index === 2 || index === 0){
     firstImg.addClass("opacityOne");
     }
  else{
     secondImg.addClass("opacityOne");
  }
}

---

这不是时间问题吗？您将立即删除和添加该类，这样就不会发生转换。是否可以将if语句包装在

setTimeout（）

中，在1200ms后触发