Angular - 重新启动 CSS 动画答案

【问题标题】：Angular - Restarting a css animationAngular - 重新启动 CSS 动画
【发布时间】：2018-08-02 00:14:56
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angular css-animations

【解决方案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>

【讨论】：

鼓励链接到外部资源，但请在链接周围添加上下文，以便您的其他用户了解它是什么以及为什么存在。始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。
对不起，也许我的问题不清楚。我有一个不同的检查组件，一个不同的交叉组件。我希望能够在组件上调用“重新启动”并从头开始播放动画。为了清楚起见，我更新了 stackblitz。
Cross & Check 将分别呈现，还是同时出现在页面上？
查看更新链接https://stackblitz.com/edit/angular-le5nbe?file=src/app/app.component.html
@Rohit.007 抱歉，我没有看到您的回复，因为我没有被标记。感谢您的更新！