CSS Transition/Animation失效排查及图片切换左滑动画实现需求

为什么你的transition没生效？ #

你当前用display: none和display: block切换图片显示状态，但**display不属于CSS可过渡属性**——它的切换是瞬间完成的，浏览器不会为它计算过渡动画，所以你加的transition样式完全不起作用。

CSS Transition的工作原理 #

Transition只能作用在可计算数值的CSS属性上，比如transform、opacity、width、left这类属性。当这些属性的值从一个明确数值变化到另一个时，浏览器会在指定时间内自动计算属性中间值，逐步应用到元素上，实现平滑过渡效果。像display、position: static/absolute这类非数值型、瞬间切换的属性，无法触发过渡动画。

实现左右滑动的图片轮播（优于缓动动画） #

要实现类似图片条的左右滑动效果，我们需要调整布局结构，用transform: translateX()控制图片容器的偏移，配合transition实现平滑滑动。以下是修改后的完整代码：

修改后的HTML #

<div class="gallery" id="gallery">
  <div class="content">
    <!-- 新增slide-wrapper容器，包裹所有slide -->
    <div class="slide-wrapper">
      <div class="slide">
        <img src="https://i.picsum.photos/id/250/536/354.jpg?hmac=qb3khzryKWU1ECPob2_1mYZLumW5eJTLSmhJzi1VVSI" alt="gallery">
      </div>
      <div class="slide">
        <img src="https://i.picsum.photos/id/868/536/354.jpg?hmac=ZcbB7ABIgl6LS5B1wxkzJ_dxJFgNmCsODUTfxM5GdRk" alt="gallery">
      </div>
      <div class="slide">
        <img src="https://i.picsum.photos/id/441/536/354.jpg?hmac=qHaUqO3vqlz-C811TXJPtRw-FV4ciRCazlDZb1gdodg" alt="gallery">
      </div>
    </div>
    <div class="firstSvg" id="back">back</div>
    <div class="lastSvg" id="next">next</div>
  </div>
</div>

修改后的CSS #

.gallery {
  width: 50%;
  height: 340px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.gallery .content {
  position: relative;
  width: 564px;
  height: 297px;
  overflow: hidden; /* 隐藏超出容器的内容 */
}

/* 图片容器，设置flex让图片横向排列 */
.gallery .content .slide-wrapper {
  display: flex;
  transition: transform 0.5s ease-out; /* 这里设置滑动过渡 */
}

.gallery .content .slide {
  flex-shrink: 0; /* 禁止图片收缩，保持原始宽度 */
  width: 564px;
  height: 297px;
}

.gallery .content .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery .content .firstSvg {
  position: absolute;
  right: 80px;
  bottom: 24px;
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery .content .lastSvg {
  cursor: pointer;
  position: absolute;
  right: 24px;
  bottom: 24px;
  height: 50px;
  width: 50px;
  background-color: wheat;
  display: flex;
  align-items: center;
  justify-content: center;
}

修改后的JS #

const slides = document.querySelectorAll('.slide');
const next = document.getElementById('next');
const back = document.getElementById('back');
const slideWrapper = document.querySelector('.slide-wrapper');
let currentSlide = 0;
const slideWidth = slides[0].offsetWidth;

// 手动切换逻辑
const manualNav = (manual) => {
  // 通过transform控制容器偏移，实现滑动
  slideWrapper.style.transform = `translateX(-${manual * slideWidth}px)`;
  currentSlide = manual;
}

next.addEventListener('click', () => {
  if (currentSlide < slides.length - 1) {
    currentSlide++;
    manualNav(currentSlide);
  }
})

back.addEventListener('click', () => {
  if (currentSlide > 0) {
    currentSlide--;
    manualNav(currentSlide);
  }
})

// 自动轮播逻辑
const repeat = () => {
  let repeater = setInterval(() => {
    currentSlide++;
    if (currentSlide >= slides.length) {
      currentSlide = 0;
    }
    manualNav(currentSlide);
  }, 10000);
}
repeat();

代码说明 #

1. 新增slide-wrapper容器，所有图片横向排列，容器设置overflow: hidden只显示当前图片区域。
2. 用transform: translateX()控制容器水平偏移，这个属性是可过渡的，配合transition就能实现平滑滑动。
3. JS逻辑不再操作active类，直接计算容器偏移量，切换更高效直观。

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