如何为JavaScript实现的视频轮播组件添加平滑过渡效果

问题根源 #

你的过渡失效核心原因是轮播切换时同时修改了display属性，display属于不可动画CSS属性，状态切换时会直接跳变，导致你写的transition规则无法生效。

修复步骤 #

1. CSS样式调整 #

替换对应部分的CSS代码：

/* 父容器调整，避免绝对定位子元素导致高度塌陷 */
.video-sliders {
  position: relative;
  display: flex;
  flex-flow: row;
}

.video-slider {
  display: flex;
  height: fit-content;
  flex-direction: column;
  align-items: center;
  background: #ebeff5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  z-index: 0;
  /* 仅对需要动画的属性加过渡，性能更好 */
  transition: opacity 1s ease, visibility 1s ease;
}

.video-sliders .video-slider.active {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

/* 小于1200px时恢复普通流，所有slide直接展示，符合你的需求 */
@media (max-width: 1199px) {
  .video-slider {
    position: relative;
    visibility: visible;
    opacity: 1;
    margin-bottom: 2rem;
  }
}

2. JS逻辑补充 #

轮播项设为绝对定位后父容器会出现高度塌陷，补充以下代码动态适配高度，无需改动原有切换逻辑：

// 动态设置轮播容器高度
function setSliderHeight() {
  const sliderContainer = document.querySelector('.video-sliders');
  if (window.innerWidth >= 1200) {
    const activeSlide = document.querySelector('.video-slider.active');
    sliderContainer.style.height = `${activeSlide.offsetHeight}px`;
  } else {
    sliderContainer.style.height = 'auto';
  }
}

// 页面加载、窗口尺寸变化时更新高度
window.addEventListener('load', setSliderHeight);
window.addEventListener('resize', setSliderHeight);

// 原有箭头点击事件中新增高度更新逻辑
for (const control of document.querySelectorAll(".nav-arrows .arrow")) {
  control.addEventListener("click", function () {
    const slides = [...document.querySelectorAll(".video-slider")];
    let index = slides.findIndex((slide) => slide.classList.contains("active"));
    slides[index].classList.remove("active");
    index = (index + (control.id === "left-arrow" ? -1 : 1) + slides.length) % slides.length;
    slides[index].classList.add("active");
    // 新增：切换轮播后更新容器高度
    setSliderHeight();
  });
}

// 你代码中定义但未使用的toggleSlide函数可以直接删除，不影响功能

修改完成后即可实现轮播切换时的淡入淡出缓动效果，完全满足仅在≥1200px视口下生效的要求。

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