带有 z-Index 的纯 JS + CSS 幻灯片：最后一张幻灯片上的故障

Question

我尝试用 JS + CSS 构建幻灯片，除了一个视觉故障外，它工作得很好。到最后一张幻灯片的过渡似乎以某种方式中断。

但我无法弄清楚问题出在哪里。如果我注释掉最后一张幻灯片上的“偏移”过渡，则不会发生错误。

这就是我说的可待因：https://codepen.io/marianbreitmeyer/pen/paeYgZ

我提到的代码块是这个：

const showNext = function() {
    clicked = true;
    for (i = 0; i <= slides.length-1; i++) {
        if( parseInt(slides[i].style.zIndex) === slides.length) {
            console.log(slides[i].innerHTML);
            triggerAnimation(slides[i], 'offcanvas');
        } else if (parseInt(slides[i].style.zIndex) === slides.length-1) {
            //the line below triggers the problem
            triggerAnimation(slides[i], 'offset');       
        }
    }
};

也许有更多经验的人可以帮助我:)

Answer 1

您的代码可能更简单：

const btn = document.getElementsByClassName('arrow')[0];
const slides = document.getElementsByClassName('slide');

slides[slides.length - 1].classList.add('offset', 'next');

btn.addEventListener("click", function(e) {
  var o, n;
  for (var i = 0; i < slides.length; i++) {
    if (slides[i].classList.contains('offset')) {
      slides[i].classList.remove('offset', 'next')
      slides[i].classList.add('offcanvas');
      o = (slides[i - 1] || slides[slides.length - 1]);
      n = (slides[i - 2] || slides[slides.length + i - 2]);
    }
    if (slides[i].offsetLeft < -slides[i].offsetWidth) {
      slides[i].classList.remove('offcanvas', 'next');
    }
  }
  o.classList.add('offset');
  n.classList.add('next');
}, false);

.container {
  width: 100%;
  height: 100vh;
  background: brown;
  position: relative;
}

body {
  text-align: center;
  font-size: 2rem;
}

.slide {
  position: absolute;
  top: 0;
  left: 90%;
  width: 100%;
  height: 100%;
}

.slide:nth-child(1) {
  background: pink;
}

.slide:nth-child(2) {
  background: blue;
}

.slide:nth-child(3) {
  background: green;
}

.slide:nth-child(4) {
  background: grey;
}

.slide:nth-child(5) {
  background: yellow;
}

.slide.next {z-index:1}

.slide.offset {
  left: -10%;
  z-index: 2;
  transition: left .65s ease-in-out;
}

.slide.offcanvas {
  left: -110%;
  z-index: 2;
  transition: left .65s ease-in-out;
}

.arrow {
  position: absolute;
  right: 5%;
  top: 25px;
  z-index: 9;
  height: 50px;
  width: 50px;
  cursor: pointer;
}

.arrow:hover path {
  transform: translate(16px, 0px);
}

path {
  position: absolute;
  top: 0;
  left: 0;
  transition: all .2s ease-in-out;
}

<div class="container">

  <div class="slide">1 = pink</div>
  <div class="slide">2 = blue</div>
  <div class="slide">3 = green</div>
  <div class="slide">4 = grey</div>
  <div class="slide">5 = yellow</div>

  <svg xmlns="http://www.w3.org/2000/svg" class="arrow"><path d="M19.443 5.17L30.138 15.5H-.095v1h30.233L19.443 26.829l.696.719L32.095 16 20.139 4.451z"/></svg>

</div>