代码之家 › 专栏 › 技术社区 › Questioning

角度-重新启动CSS动画

css-animations angular

Questioning · 技术社区 · 6 年前

举个例子: https://stackblitz.com/edit/angular-w4twwo

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

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

由于有些混乱,我现在加了支票和划线。两种方法都有 component.ts 文件和一个 app.component.ts 可以使用。

1 回复 | 直到 6 年前

Rohit.007 6 年前

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

  status = 'check';

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

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

check

<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>

推荐文章

Ancross · 为什么我的小CSS动画不会触发?

2 年前

tommy · 月亮升起和月亮集动画css

2 年前

EGxo · 为类的每个元素分配随机动画延迟

6 年前

MD.ALIMUL Alrazy · 如何从左到右设置svg svg笔划线动画的动画?

7 年前

cvdv · 如何平滑css平行循环旋转动画?

7 年前

developer · 使用css动画的线微调器

7 年前

Matt · 对于图像,ReactCSTransition动画不平滑

7 年前

Jeanluca Scaljeri · 单击后来回运行css动画

7 年前

Albert qerimi · 将鼠标悬停在具有CSS变换比例的div上后添加动画

7 年前

Krystian · css旋转吊架和心率线

7 年前