动画时垫步内容消失 - mat-horizontal-stepper答案

【问题标题】：mat-step content vanishes when animating - mat-horizontal-stepper动画时垫步内容消失 - mat-horizontal-stepper
【发布时间】：2020-03-08 01:45:34
【问题描述】：

在将 Material Stepper 与容器动画结合使用时，注意到一些奇怪的行为。

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

Stackblitz Example

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

【问题讨论】：

您遇到的浏览器问题？ Chrome 我可以看到所有 3 个步骤的内容。
铬。重新加载demo，当它淡入时，垃圾邮件点击第2步。你会看到它消失了。我将动画时间增加到 2 秒，应该让它更明显。
可见性的一些问题：可见。如果您查看 chrome 中的计算样式选项卡。它会向您显示可见性：隐藏，尽管它应该在动画完成后将其计算为可见性：可见。
使用visibility 样式也与opacity

标签： angular angular-material

【解决方案1】：

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

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

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

这是我可以对这两个动画进行排序的唯一方法，这在之前明显弄乱了可见性状态。对我来说，只有在 Angular Material 的 stepTransition 动画之后触发 fadingAnimation 才有效。我尝试使用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 的来源。

【讨论】：