javascript - css transition 在一个元素中有效，但在第二个元素中无效

Question

我正在尝试使用 css 和 javascript 构建一个简单的图像 slider ，我有一个 UL，里面有一些 LI。图像是 LI 的背景，所以我只需移动两个 LI，一个是事件的，一个是下一个，以使 slider 工作。当按下“下一步”按钮时，我将类添加到两个 LI，发生的情况是已经可见的 li 执行他的过渡，在左侧消失，但第二个 LI 卡入到位而没有从右侧滑入。我不明白我哪里出错了，为什么第二个 LI 没有触发转换。

这是一支带有一些代码的笔: https://codepen.io/luzzuc/pen/xONywP

HTML

<ul>
  <li class="active" style="background-image: url(http://static.giantbomb.com/uploads/original/0/26/9780-itsahim.JPG)"></li>
  <li style="background-image: url(http://vignette3.wikia.nocookie.net/fantendo/images/5/5b/NSMBDIY_Mario_Jump.png/revision/latest?cb=20100405031309)"></li>
</ul>
<br><br>
<button id="next">Next</button>

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 20%;
  padding-top: 12%;
  position: relative;
  background: #000;
  overflow: hidden;
}

li {
  position: absolute;
  visibility: hidden;
  width: 100%;
  padding-top: 60%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  top: 0;
  left: 0;
}

.active {
  visibility: visible;
  transition: left 2s;
}

.active-slide {
  left: -100%;
}

.next {
  left: 100%;
  visibility: visible;
  transition: left 2s;
}

.next-slide {
  left: 0;
}

Javascript

var b = document.getElementById('next');
b.addEventListener('click', animate);

function animate() {
  var a = document.querySelector('.active');
  var b = document.getElementsByTagName('li')[1];
  b.classList.add('next');
  a.classList.add('active-slide');
  b.classList.add('next-slide');
}

Answer 1

请尝试这个版本:https://jsfiddle.net/urhn8b6k/

首先，第2个li的初始状态是left: 0;，css表示从left: 0;到 left: 100%; 和 transition: left 2s; 在 .next 中，所以你必须移动 transition: left 2s; 到 .next-slide

在执行 b.addClass... a.addClass... b.addClass... 时，这只是在执行 b.addClass("next next-slide")，尝试将第二个 addClass 放入 setTimeout 延迟 1ms 应该可以解决问题