角动画在完成后跳转到不想要的值

Posted 2023-03-13

【中文标题】角动画在完成后跳转到不想要的值

【英文标题】：Angular animation jumps to undesired value upon completion

【发布时间】：2019-05-11 20:46:43

【问题描述】：

我创建了一个 Angular 动画（请参阅下面的 Stackblitz 链接）。当包装它的ngIf 的条件变为真时，我想要一个元素在输入时进行动画处理。

动画开始工作，从5px扩展到width中的50px。 但是，一旦到达终点，它就会跳跃变成全屏宽度！

这里是问题的重现： https://stackblitz.com/edit/angular-flf7ha

---

代码

app.component.html

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

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

app.component.ts

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('horizontalBarGrow', [
        transition(':enter', [
            style( width: '5px' ),
            animate('500ms ease-out', style( width: '50px' )),
        ]),
    ])
  ]
)
export class AppComponent  
  name = 'Angular';

  bars = []

  addBars() 
    this.bars.push( width: '10%');
    this.bars.push( width: '40%');
  

【问题讨论】：

快速解决方法是在 css 中的 #bar 上添加 width: 50px。

【参考方案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.

【讨论】：

感谢您的回答。然而，我使用:enter 和:leave 转换很重要，因为我希望这段代码在ngFor 中工作。也就是说，我不能有单独的 showBar 变量用于 20 个条形数组中的条形

您希望所有进度条同时显示完全相同的动画？

是的。在这种情况下，实际上不是进度条，而是水平条形图的一部分。查看我在 StackBlitz stackblitz.com/edit/angular-flf7ha

中所做的更新

您可以在动画中定义参数，然后将它们传递给动画，这是一个使用此解决方案的运行示例：stackblitz.com/edit/***-53714352-3。另一种解决方案是将 div 封装在另一个具有所需大小的 div 中，这是第二个解决方案的运行示例：stackblitz.com/edit/***-53714352-2