我一直坚持使用 CDK 对 Angular Material 自定义步进器的步进变化进行动画处理。 我已经关注了tutorial关于如何实现自定义步进器。
我有演示here
我的模板如下所示:
<section class="container">
<header>
<h2>Step {{selectedIndex + 1}}/{{steps.length}}</h2>
<div>
<button class="pure-button" cdkStepperPrevious>←</button>
<button
class="pure-button"
*ngFor="let step of steps; let i = index;"
[ngClass]="{'pure-button-primary': selectedIndex === i}"
(click)="onClick(i)"
>
Step {{i + 1}}
</button>
<button class="pure-button" cdkStepperNext>→</button>
</div>
</header>
<div [@stepTransition]="_getAnimationDirection(current)" *ngFor="let step of _steps; let i = index">
<div [ngTemplateOutlet]="selected.content"></div>
</div>
</section>
我的组件 TS 文件如下所示:
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 {
current = 0;
onClick(index: number): void {
this.current = index;
this.selectedIndex = index;
}
ngOnInit() {
console.log(this._getFocusIndex())
}
}
动画仅适用于最后一步,原因是动画状态(上一个、当前、下一个)值在单击时不会改变。
我怎样才能实现这个目标?非常感谢任何想法,谢谢。
更新 检查 stackblitz 存储库以获取最新代码
最佳答案
在您的 stackblitz demo 中您有以下 html:
<div *ngFor="let step of _steps; let i = index"
[@stepTransition]="_getAnimationDirection(i)"
[attr.tabindex]="selectedIndex === i ? 0 : null"
[id]="_getStepContentId(i)"
(@stepTransition.done)="_animationDone.next($event)"
[attr.aria-labelledby]="_getStepLabelId(i)"
[attr.aria-expanded]="selectedIndex === i">
<ng-container [ngTemplateOutlet]="selected.content">
</ng-container>
</div>
我认为这里的主要问题在于这一行:<div [ngTemplateOutlet]="selected.content"></div>
您创建一个div
对于每个 step
,以及每个div
将包含相同的 selected.content
。因此所有样式都应用于父级 div
( transform
和 visibility
)也适用于 selected.content
这将导致模棱两可的行为。
如果将其替换为 <div [ngTemplateOutlet]="step.content"></div>
,您将开始看到所有图像,但它们将被放置在另一张图像下面。
发生这种情况是因为 css visibility属性:
it shows or hides an element without changing the layout of a document.
所以我建议您添加position: absolute;
按照您的步骤。
看看stackblitz有了这些改进
关于 Angular CDK : Apply animations to Angular custom stepper on step change,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58012925/