gpt4 book ai didi

angular - 如何在组件内部手动触发动画?

转载 作者:行者123 更新时间:2023-12-02 19:25:48 25 4
gpt4 key购买 nike

在 Angular 9 中 animations ,我如何从组件本身触发动画?我假设我会在组件本身中手动执行此操作,因为它会跟踪创建图形时的状态。与使用模板表达式相反,在模板表达式中,父级将通过数据绑定(bind)和主机属性来跟踪状态。

<div class="chart-body">
<div *ngFor="let chart of charts | async | daysFilter:7" class="last-seven-days-body">
<line-chart
[curve-data]="chart"
graph-size="med"></line-chart>
</div>
</div>
@Component({
selector: 'line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['./line-chart.component.css'],
animations: [
trigger('fadeIn', [
transition('void => *', [
style({ opacity: 0 }),
animate(2000, style({opacity: 1}))
])
])
],

})

export class LineChartComponent {
@Input('curve-data') curveData: Array<object>;
@Input('graph-size') graphSize: String;


constructor(
private lineChartService: LineChartService,
private elRef: ElementRef,
private fadeInStart: Boolean,
) { }

ngAfterViewInit() {
this.lineChartService.makeGraph(
this.curveData,
this.elRef.nativeElement,
this.graphSize,
);

this.fadeInStart = true; //AFTER GRAPH IS MADE, TURN ON FADE IN ANIMATION HERE
}
}

最佳答案

您可以尝试给出特定的名称/ bool 值,例如 false => true 并将其绑定(bind)到成员变量,而不是使用转换 void => *。尝试以下方法

折线图.component.ts

@Component({
selector: 'line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['./line-chart.component.css'],
animations: [
trigger('fade', [
state('false', style({ opacity: 0 })),
state('true', style({ opacity: 1 })),
transition('false => true', animate('2000ms ease-in')),
transition('true => false', animate('2000ms ease-out'))
]),
]
})
export class LineChartComponent {
@Input('curve-data') curveData: Array<object>;
@Input('graph-size') graphSize: String;

public fadeInStart = false; // <-- hide chart by default

constructor(
private lineChartService: LineChartService,
private elRef: ElementRef,
) { }

ngAfterViewInit() {
this.lineChartService.makeGraph(
this.curveData,
this.elRef.nativeElement,
this.graphSize,
);

this.fadeInStart = true; // <-- show chart here
}
}

折线图.component.html

<div [@fade]="fadeInStart">
<!-- chart -->
</div>

Ivy 更新 (03/15/21)

关于angular - 如何在组件内部手动触发动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62415569/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com