Question

我正在试图制作一个旋转木马（我知道已经很像bootstrap了，但我认为这是一个很好的学习练习）所以我已经做了一个技巧来添加淡入淡出过渡。我将要显示的元素设置为不透明度为0：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);

CSS转换在功能结束时中止

0 个答案: