Angular CDK自定义Stepper步骤切换动画失效问题求助

我来帮你排查下问题根源，你的动画只有最后一步生效，核心原因是模板里的动画状态绑定和步骤渲染逻辑出了问题，下面是具体的分析和修复方案：

问题分析 #

1. 动画状态未区分单个步骤：你在模板中给所有步骤统一绑定了[@stepTransition]="_getAnimationDirection(current)"，这里的current是你自定义的变量，但_getAnimationDirection方法需要接收单个步骤的索引，用来判断该步骤相对于当前选中索引是previous/current/next状态，统一传current会导致所有步骤的动画状态完全一致，无法触发正确的切换动画。
2. 步骤内容渲染错误：你用了<div [ngTemplateOutlet]="selected.content"></div>，这意味着所有循环的步骤都显示当前选中步骤的内容，相当于DOM里多个重复的相同内容，动画自然无法正确区分步骤切换。
3. 冗余的current变量：CdkStepper已经内置了selectedIndex来跟踪当前选中的步骤，你自定义的current变量完全多余，还可能导致状态不一致。

修复方案 #

1. 修正模板代码 #

把步骤循环的动画状态绑定和内容渲染逻辑调整为：

<section class="container">
  <header>
    <h2>Step {{selectedIndex + 1}}/{{steps.length}}</h2>
    <div>
      <button class="pure-button" cdkStepperPrevious>&larr;</button>
      <button class="pure-button" *ngFor="let step of steps; let i = index;" 
              [ngClass]="{'pure-button-primary': selectedIndex === i}" 
              (click)="selectedIndex = i" >
        Step {{i + 1}}
      </button>
      <button class="pure-button" cdkStepperNext>&rarr;</button>
    </div>
  </header>
  <!-- 每个步骤根据自身索引获取动画状态，渲染自己的内容 -->
  <div 
    *ngFor="let step of _steps; let i = index"
    [@stepTransition]="_getAnimationDirection(i)"
    class="step-container"
  >
    <div [ngTemplateOutlet]="step.content"></div>
  </div>
</section>

2. 简化组件TS代码 #

移除冗余的current变量和onClick方法，直接使用CdkStepper的selectedIndex：

import { Component, OnInit } from '@angular/core';
import { CdkStepper } from '@angular/cdk/stepper';
import { trigger, state, style, animate, transition, } from '@angular/animations';

@Component({
  selector: 'app-my-stepper',
  templateUrl: './my-stepper.component.html',
  styleUrls: ['./my-stepper.component.css'],
  providers: [{ provide: CdkStepper, useExisting: MyStepperComponent }],
  animations: [trigger('stepTransition', [
    state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
    state('current', style({transform: 'none', visibility: 'visible'})),
    state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
    transition('* => *', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
  ])]
})
export class MyStepperComponent extends CdkStepper implements OnInit {
  ngOnInit() {
    console.log(this._getFocusIndex())
  }
}

3. 添加必要的CSS（可选） #

为了让步骤容器正确排列，避免布局混乱，可以添加：

.step-container {
  position: absolute;
  width: 100%;
}
.container {
  position: relative;
  overflow: hidden;
}

为什么这样修复？ #

• 每个步骤现在会根据自己的索引i调用_getAnimationDirection(i)，CdkStepper会自动计算该步骤相对于selectedIndex的状态（previous/current/next），动画状态会正确更新。
• 每个步骤渲染自己的step.content，DOM里的内容不再重复，切换步骤时动画会针对对应的步骤元素生效。
• 直接使用selectedIndex = i来切换步骤，依赖CdkStepper内置的状态管理，避免自定义变量带来的状态不一致问题。

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