Javascript CSS转换在函数结束时中止

我正在玩旋转木马（我知道已经有很多类似bootstrap的，但我认为这是一个很好的学习练习），所以我做了一个技巧来添加渐变过渡。我将要显示的元素设置为活动且不透明度为：0；并将其设置为1。我做了一个转换：不透明度1s；在活动元素上，所以我希望它会在前一个元素前面淡入。 这正是我调试代码（chrome调试器）时发生的情况，但以真正的速度没有转换。。。我很确定这是因为函数在转换结束之前就结束了，但我没想到它会发生。。。 以下是我使用的js函数：

next.addEventListener("click", function(){
  var nbItems = itemsCollection.length;
  for (var i = 0; i < nbItems; i++) {
    var j = (i+1)%nbItems;
    var itemAttributes = itemsCollection[i].className.split(" ");
    if(itemAttributes.indexOf("active") > -1){
      itemsCollection[j].style.opacity = "0";
      itemsCollection[i].className = "item transition";
      itemsCollection[j].className = "item active";
      itemsCollection[j].style.opacity = "1";
      itemsCollection[i].className = "item";
      document.querySelector(".carousel .indicator.target-" + i).className = "indicator target-" + i;
      document.querySelector(".carousel .indicator.target-" + j).className = "indicator target-" + j + " active";
      break;
    }
  }
}, false);

next.addEventListener（“单击”，函数（）{
var nbItems=itemsCollection.length；
对于（变量i=0；i-1）{
itemsCollection[j].style.opacity=“0”；
itemsCollection[i].className=“项目转换”；
itemsCollection[j].className=“项目活动”；
itemsCollection[j].style.opacity=“1”；
itemsCollection[i].className=“item”；
document.querySelector（“.carousel.indicator.target-”+i）.className=“indicator target-”+i；
document.querySelector（“.carousel.indicator.target-”+j）.className=“indicator target-”+j+“active”；
打破
}
}
}，假）；

噢，我忘记了：.item、.item.transition和.item.active用于定义不同的z索引单击问题下方的编辑链接添加您忘记的内容。