不懂就问，为什么 JS 要加入 setTimeout， css 的 transition 才能生效

当然我的标题有点极端化了，以前使用 JS 修改一个 html 标签的样式，配合 css 的 transition 是可以看得到过渡的，然而最近的一个项目使用 transform 搭配 transition，标签的移动直接一步到位没有动画过渡效果，但是加入了 setTimeout 之后，transition 就能显现出来，下面是代码

<-- ! HTML --> <div class="slideshow"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="http://8.8.8.8/webstorm/20191216headerimg01.jpg"> </div> <div class="carousel-item"> <img src="http://8.8.8.8/webstorm/20191210headerimg01.jpg"> </div> <div class="carousel-item"> <img src="http://8.8.8.8/webstorm/20191129headerimg01.jpg"> </div> </div> </div> <-- ! CSS --> .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel-item { position: relative; display: none; float: left; width: 100%; margin-right: -100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .6s ease-in-out; } .carousel-item-next { transform: translateX(100%); } .carousel-item-next, .carousel-item.active { display: block; } .carousel-item.active.to-left, { transform: translateX(-100%); } <-- ! Javascript --> var nextPic = document.getElementsByClassName('active')[0].nextElementSibling; var currentPic = document.getElementsByClassName('active')[0]; //将下一张图片的样式增加一个 carousel-item-next，使其 translateX(100%);display: block;并在轮播框外显示 nextPic.setAttribute('class', 'carousel-item carousel-item-next'); setTimeout(function () { /*给 active 状态的图片添加一个 to-left，使其 translateX(-100%)， carousel-item 本身已经设置了针对 transform 的 transition， 所以这一步完成就会显示往左移*/ currentPic.setAttribute('class', 'carousel-item active to-left'); /*给下一张轮播图设置成 translateX(0)，从原来的 translateX(100%)到 translateX(0)，配合 transition 实现左移进入轮播框*/ nextPic.style.transform = 'translateX(0)'; },0) setTimeout(function () { //下面这三条将动画完成后的样式重置，确定新的 active 轮播图 currentPic.className = 'carousel-item'; nextPic.className = 'carousel-item active'; nextPic.style.transform = ''; },2000) 

上面的代码是能够完成动画效果的，但是一开始写的时候我没有 setTimeout，没有 setTimeout 的情况下过渡效果没有了，直接显示过渡完之后的状态

所以 setTimeout 跟 transition 究竟是个什么关系，setTimeout 是时间结束之后执行代码，又不是指定每一行代码执行的时间间隔

还有，这个轮播思路是从 bootstrap 上面摸过来的，甚至连 class 名都没改