制作动画时，mat-step内容消失了-mat-h​​orizo​​ntal-stepper

Question

结合使用Material Stepper和容器动画时，发现了一些奇怪的行为。

如果在垫子步进器设置动画时单击某个步骤，则该步骤的内容将变为不可见。

HTML：

<strong> reload - while the stepper is fading in - spam click step 2 </strong>.

<mat-horizontal-stepper [@fadeAnimation]>
    <mat-step>
        <p>STEP ONE CONTENT</p>
    </mat-step>
    <mat-step>
        <p>STEP TWO CONTENT</p>
    </mat-step>
    <mat-step>
        <p>STEP THREE CONTENT</p>
    </mat-step>
</mat-horizontal-stepper>

动画：

function fadeAnimation() {
  return trigger('fadeAnimation', [
    state('void', style({})),
    state('*', style({})),
    transition(':enter', [
      style({ opacity: 0 }),
      animate('1s ease-in-out', style({ opacity: 1 }))
    ]),
    transition(':leave', [
      style({ opacity: 1 }),
      animate('1s ease-in-out', style({ opacity: 0 }))
    ])
  ]);
}

Stackblitz Example

有没有可能的解决方法？ （当然，除了[@.disabled]之外，还需要动画。）

Answer 1

我成功了。至少对于我来说。请尝试是否适合您的需求。参见Stackblitz。

基本上，我为fadeAnimation设置了以下特定状态的触发器：visible和hidden。

默认值为hidden。然后，仅当完成stepTransition中的mat-stepper时，触发器才设置为可见。我们可以听一个(animationDone)事件。

这是我排序这两个动画的唯一方法，而这两个动画之前显然弄乱了可见性状态。 对我来说，它只有在从Angular Material制作fadingAnimation动画之后触发stepTransition时才有效。我尝试使用query和stagger，但工作不正确。

@Component({
  selector: 'stepper-overview-example',
  templateUrl: 'stepper-overview-example.html',
  styleUrls: ['stepper-overview-example.css'],
  animations: [fadeAnimation()]
})
export class StepperOverviewExample implements OnInit {

  constructor() {}

  fadeTrigger = 'hidden';

  ngOnInit() {

  }

  stepperDone() {
    console.log('stepper is done now');
    this.fadeTrigger = 'visible';
  }
}

function fadeAnimation() {
  return trigger('fadeAnimation', [
    state('hidden', style({ opacity: 0 })),
    state('visible', style({ opacity: 1 })),

    transition('* => visible', [
      animate('2s ease-in-out'),
    ]),
    transition('visible => *', [
      animate('1s ease-in-out')
    ])
  ]);
}

HTML

<mat-horizontal-stepper [@fadeAnimation]="fadeTrigger" (animationDone)="stepperDone()">
    <mat-step>
        <p>STEP ONE CONTENT</p>
    </mat-step>
    <mat-step>
        <p>STEP TWO CONTENT</p>
    </mat-step>
    <mat-step>
        <p>STEP THREE CONTENT</p>
    </mat-step>
</mat-horizontal-stepper>

Link到MatStepper动画的来源。

Link到Stepper的来源。