Почему переход не работает при удалении и добавлении класса к одному и тому же элементу с использованием removeClass () и addClass ()?

Question

Есть 2 изображения, у первого из которых есть класс "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>

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

Разве это не проблема времени? Вы сразу удаляете и добавляете класс, чтобы переход даже не произошел. Не могли бы вы проверить, поместив оператор if в setTimeout() для запуска после 1200 мс?