不懂就问，为什么 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 名都没改