如何让Angular图片滑块跳转幻灯片时跳过中间步骤？

要实现直接从当前幻灯片平滑过渡到目标幻灯片、跳过中间步骤的效果，只需修改以下3部分：

1. 更新组件TS代码，记录上一个索引 #

添加prevIndex变量保存跳转前的幻灯片索引，确保只有前一张幻灯片参与退出动画：

export class App {
  images: string[] = [
    'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg',
    'https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0%2C176%2C3008%2C1654&wid=4000&hei=2200&scl=0.752',
    'https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg?cs=srgb&dl=pexels-souvenirpixels-417074.jpg&fm=jpg',
    'https://www.wbcsd.org/wp-content/uploads/2023/10/Accelerating-business-along-the-road-to-a-nature-positive-future_i1140.jpg',
  ];

  currentIndex: number = 0;
  prevIndex: number = 0; // 记录上一个激活的幻灯片索引

  public prevSlide() {
    this.prevIndex = this.currentIndex;
    this.currentIndex = this.currentIndex === 0 ? this.images.length - 1 : this.currentIndex - 1;
  }

  public nextSlide() {
    this.prevIndex = this.currentIndex;
    this.currentIndex = this.currentIndex === this.images.length - 1 ? 0 : this.currentIndex + 1;
  }

  public goToSlide(index: number) {
    if (index === this.currentIndex) return; // 点击当前激活的圆点不处理
    this.prevIndex = this.currentIndex;
    this.currentIndex = index;
  }
}

2. 修改HTML模板，基于prevIndex标记退出的幻灯片 #

将prev类的判断从依赖currentIndex计算改为直接匹配prevIndex：

<div class="slider-container">
  <div class="slider">
    <div
      class="slide"
      *ngFor="let image of images; let i = index"
      [ngClass]="{'active': i === currentIndex, 'prev': i === prevIndex}"
    >
      <img [src]="image" alt="Image {{ i + 1 }}" />
    </div>

    <div class="nav prev" (click)="prevSlide()">&#10094;</div>
    <div class="nav next" (click)="nextSlide()">&#10095;</div>
  </div>

  <div class="indicators">
    <span
      class="dot"
      *ngFor="let image of images; let i = index"
      [ngClass]="{'active': i === currentIndex}"
      (click)="goToSlide(i)"
    ></span>
  </div>
</div>

3. 调整CSS，限制过渡效果仅作用于参与动画的幻灯片 #

让只有激活和退出的幻灯片应用过渡动画，其他幻灯片直接回到初始位置：

.slider-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.slider {
  position: relative;
  height: 500px;
  overflow: hidden;
}

.slider .slide {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* 默认无过渡，仅active/prev幻灯片应用动画 */
}

.slider .slide img {
  width: 100%;
  object-fit: cover;
}

/* 仅给参与动画的幻灯片添加过渡 */
.slider .slide.active,
.slider .slide.prev {
  transition: opacity 1s ease-in-out, left 1s ease-in-out;
}

.slider .slide.active {
  opacity: 1;
  left: 0;
}

.slider .slide.prev {
  left: -100%;
  opacity: 0;
}

.slider .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 16px;
  font-size: 24px;
  color: white;
  cursor: pointer;
  user-select: none;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
}

.slider .nav.prev {
  left: 0;
}

.slider .nav.next {
  right: 0;
}

.indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  z-index: 11;
}

.indicators .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.indicators .dot.active {
  background-color: #007bff;
}

.indicators .dot:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

原理说明 #

• 通过prevIndex精准记录跳转前的幻灯片，确保只有该幻灯片执行退出动画，目标幻灯片执行进入动画。
• 限制过渡效果仅作用于active和prev类的幻灯片，其他幻灯片瞬间回到右侧隐藏位置，不会在过渡过程中显示。

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