mat-step 内容在动画时消失 - mat-h​​orizo​​ntal-stepper

Question

注意到将材质步进器与容器动画结合使用时出现一些奇怪的行为。

如果您在 mat-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 }))
    ])
  ]);
}

堆栈闪电战示例

有没有可能的解决方法？（当然[@.disabled]，动画还是想要的。）

Answer 1

我成功了。至少对于我来说。请尝试一下是否符合您的需求。请参阅堆栈闪电战。

基本上我给了fadeAnimation一个具有特定状态的触发器：visible和hidden。

默认值为hidden。stepTransition然后，只有当frommat-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')
    ])
  ]);
}

超文本标记语言

<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>

链接到 MatStepper 动画源。

链接到 Stepper 的源代码。