为什么在使用 removeClass() 和 addClass() 将 class 移除和添加到同一元素时，转换不起作用？

Question

有 2 张图像，第一个图像有 "opacityOne" class，当单击按钮时，根据名为 index 的变量，我希望当前图像淡入并且另一个淡出。

当 "opacityOne" 从一个图像中删除并添加到另一个图像时它工作正常但是当我想删除 "opacityOne" 并将其添加到同一元素时，我看不到它工作不会出现淡入淡出。我在想 transition 会起作用，因为我从元素中删除并添加了一个 class，但我不明白为什么它不起作用。

如何通过删除和添加相同的元素来淡入淡出 class？

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>

CSS:

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

jQuery:

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");
  }
}

Answer 1

难道不是时间问题？您正在删除和添加 class 直接所以过渡甚至不会发生。您能否通过将 if 语句包装在 setTimeout() 中以在 1200 毫秒后触发来进行测试？

为什么在使用 removeClass() 和 addClass() 将 class 移除和添加到同一元素时，转换不起作用？

Why does not transition work when removing and adding the class to the same element using removeClass() and addClass()?

javascript

css

jquery

transition