Question

我已经创建了一个Angular动画（请参见下面的Stackblitz链接）。我希望元素在进入ngIf的条件变为真实时进行动画处理。

动画从头开始起作用，从5px的{{1}}扩展到50px。但是，一旦到达末尾，它就会跳转成为全屏宽度！

这里是问题的复制品： https://stackblitz.com/edit/angular-flf7ha

代码

app.component.html

width

app.component.ts

<button (click)="addBars()">Toggle Bar</button>

<div *ngFor="let bar of bars">
  <div id="bar" @horizontalBarGrow [style.width.%]="bar.width"></div>
</div>

Answer 1

TL; DR; 没有状态样式，只有过渡样式。

默认情况下，div是全角：

A div with the default width :
<div style="background-color: #3498db; height: 50px;"></div>

转换结束后，div将再次使用默认值。

我建议为您的情况指定状态：

trigger('horizontalBarGrow', [
  state('true', style({ width: '50px' })),
  state('false', style({ width: '0px' })),
  transition('false <=> true', animate(500))
])

Here is an edit of your stackblitz.

完成时，角度动画会跳到不希望的值

1 个答案: