Question

给出以下示例：https://stackblitz.com/edit/angular-w4twwo

我希望能够在方法调用时重新启动此svg的动画。

当前在我的应用程序中，我有一个check和一个cross，应该根据每30秒发生一次api请求的结果来重新设置这些动画。

由于有些混乱，我现在同时添加了检查和交叉。 component.ts文件中有方法，app.component.ts中有一种方法都可以使用。

Answer 1

我已经为您更改了代码，请检查

https://stackblitz.com/edit/angular-le5nbe?file=src/app/app.component.html

您可以根据API响应来切换状态

可以根据您的API响应使用这些更改。

  status = 'check';

  fnCheck(){
    this.status = 'check';
  }

  fnCross(){
    this.status = 'cross';

我为您的帮助添加了check svg，并为事件添加了2个按钮（根据您的情况，您可以根据API响应调用这些方法）

<svg #cross *ngIf="status == 'cross'" class="cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
    <circle class="cross__circle" cx="26" cy="26" r="25" fill="none" />
    <path class="cross__line" fill="none" d="M36 16 16 36" />
    <path class="cross__line2" fill="none" d="M16 16 36 36" />
</svg>

<svg #right *ngIf="status == 'check'" class="cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
    <circle class="cross__circle" cx="26" cy="26" r="25" fill="none" />
    <path d="M36.285 16l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/>
</svg>

<button (click)='fnCheck()' >Check</button>
<button (click)='fnCross()' >Cross</button>

Angular-重新启动CSS动画

1 个答案: