如何为原生JS/CSS实现的幻灯片添加平滑过渡效果

你的轮播切换逻辑用的是直接修改display属性在none和block之间跳转，这个属性是没有中间过渡状态的离散属性，不管加多少transition规则都不会产生渐变效果，这是过渡不生效的核心原因。另外代码里还有两个会影响效果的小问题：

• HTML结构中第一个轮播项多写了一层</div>闭合标签，会打乱DOM层级导致布局错乱
• CSS里.delimitare的背景色值书写错误，多打了一个多余的r，正确写法为#141313ed

不需要推翻原有逻辑框架，只需要做少量修改即可实现平滑过渡：

1. 修改CSS样式 #

把轮播项的显示逻辑从display切换改为透明度叠加，所有轮播项默认叠在同一位置，通过透明度控制显隐，加上过渡规则：

body,
#slider,
.wrap,
.slide-content {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.wrap {
  position: relative;
}

/* 给轮播容器加相对定位，承载绝对定位的轮播项 */
#slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  /* 所有轮播项绝对定位 叠加在容器同一位置 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 默认透明 层级低 */
  opacity: 0;
  z-index: 0;
  /* 过渡规则 0.6秒淡入淡出 可自行调整时长 */
  transition: opacity 0.6s ease-in-out;
}

/* 激活状态的轮播项不透明 层级最高 显示在最前 */
.slide.active {
  opacity: 1;
  z-index: 1;
}

.delimitare {
  /* 修正错误的颜色值 */
  background-color: #141313ed;
  width: 100%;
  height: 100%;
  padding-left: 10%;
  padding-right: 10%;
}

.content-interior {
  background-color: #141313;
  width: 100%;
  height: 100%;
}

.slide-content span {
  font-size: 5rem;
  color: #fff;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
  /* 给箭头加z-index 保证永远在轮播项上方可点击 */
  z-index: 10;
}

#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent #fff transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 30px;
}

2. 修正HTML结构错误 #

删掉第一个轮播项多余的闭合标签，修正后结构如下：

<div class="wrap">
  <div id="arrow-left" class="arrow"></div>
  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
      
      </div>
    </div>
    <div class="slide slide2">
      <div class="slide-content">
        <span>Image Two</span>
      </div>
    </div>
    <div class="slide slide3">
      <div class="slide-content">
        <span>Image Three</span>
      </div>
    </div>
  </div>
  <div id="arrow-right" class="arrow"></div>
</div>

3. 修改JS逻辑 #

把原来直接修改display样式的逻辑，替换为切换active类名：

let sliderImages = document.querySelectorAll(".slide"),
  arrowLeft = document.querySelector("#arrow-left"),
  arrowRight = document.querySelector("#arrow-right"),
  current = 0;

// 清除所有轮播项的激活状态
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].classList.remove("active");
  }
}

// 初始化轮播
function startSlide() {
  reset();
  sliderImages[0].classList.add("active");
}

// 切换到上一张
function slideLeft() {
  reset();
  sliderImages[current - 1].classList.add("active");
  current--;
}

// 切换到下一张
function slideRight() {
  reset();
  sliderImages[current + 1].classList.add("active");
  current++;
}

// 左箭头点击事件
arrowLeft.addEventListener("click", function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// 右箭头点击事件
arrowRight.addEventListener("click", function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

如果想要左右滑动、缩放切换等其他过渡效果，只需要修改.slide和.slide.active的CSS属性即可，比如实现左右滑动效果，可以把slide的过渡属性改成针对transform，非激活状态的轮播项设置transform: translateX(100%)，激活状态设置transform: translateX(0)，JS逻辑完全不用改。
过渡时长、缓动效果都可以通过修改transition的参数自行调整。

内容的提问来源于stack exchange，提问作者DEKARFC