添加animation-delay无效果，求助实现滑块图片左右滑动过渡动画

我帮你排查了下问题，你添加的animation: slide 0.5s forwards; animation-delay: 2s;没生效，核心原因是没有定义slide对应的@keyframes关键帧，浏览器根本不知道这个动画要执行什么动作~ 而且原有的图片切换逻辑（直接切换display）也没法适配滑动动画，咱们来一步步实现你要的「下一张从右滑入、上一张从左滑入」的效果：

一、核心调整思路 #

1. 给图片容器设置overflow: hidden，限制图片滑动范围，避免超出容器
2. 用绝对定位让图片重叠在同一位置，方便滑动切换
3. 定义两个方向的滑入关键帧动画
4. 切换图片时，根据方向给目标图片添加对应动画类，完成后重置状态

二、完整代码实现 #

CSS 部分 #

.slider-container {
  position: relative;
  width: 300px; /* 按需调整 */
  height: 200px; /* 按需调整 */
  overflow: hidden;
}

.slider-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0s; /* 辅助动画结束后隐藏 */
}

.slider-img.active {
  opacity: 1;
}

/* 从右侧滑入动画 */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 1;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 从左侧滑入动画 */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 1;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-right {
  animation: slideInRight 0.5s forwards;
}

.slide-in-left {
  animation: slideInLeft 0.5s forwards;
}

JS 部分 #

const imgs = document.querySelectorAll('.slider-img');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
let currentIndex = 0;

// 初始化显示第一张图
imgs[currentIndex].classList.add('active');

nextBtn.addEventListener('click', () => {
  const nextIndex = (currentIndex + 1) % imgs.length;
  // 移除当前图的active类，给下一张添加右滑入动画
  imgs[currentIndex].classList.remove('active');
  imgs[nextIndex].classList.add('slide-in-right');
  
  // 动画结束后重置样式，更新当前索引
  imgs[nextIndex].addEventListener('animationend', () => {
    imgs[nextIndex].classList.remove('slide-in-right');
    imgs[nextIndex].classList.add('active');
    currentIndex = nextIndex;
  }, { once: true }); // 只执行一次监听
});

prevBtn.addEventListener('click', () => {
  const prevIndex = (currentIndex - 1 + imgs.length) % imgs.length;
  // 移除当前图的active类，给上一张添加左滑入动画
  imgs[currentIndex].classList.remove('active');
  imgs[prevIndex].classList.add('slide-in-left');
  
  // 动画结束后重置样式，更新当前索引
  imgs[prevIndex].addEventListener('animationend', () => {
    imgs[prevIndex].classList.remove('slide-in-left');
    imgs[prevIndex].classList.add('active');
    currentIndex = prevIndex;
  }, { once: true });
});

HTML 结构（配合调整） #

<div class="slider-container">
  <img src="图1地址" class="slider-img" alt="图1">
  <img src="图2地址" class="slider-img" alt="图2">
  <img src="图3地址" class="slider-img" alt="图3">
</div>
<button id="prev">上一张</button>
<button id="next">下一张</button>

三、逻辑说明 #

• 点击「下一张」时，下一张图片从容器右侧（translateX(100%)）滑动到初始位置，动画结束后设置为激活状态
• 点击「上一张」时，上一张图片从容器左侧（translateX(-100%)）滑动到初始位置，完成后更新激活状态
• 用animationend事件监听动画结束，避免重复添加动画类，保证每次切换都能触发正确的动画

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