Angular - Restarting a css animation

Question

Given the following example: https://stackblitz.com/edit/angular-w4twwo

I would like to be able to restart the animation of this svg upon method call.

Currently within my application I have a check and a cross, these should be re-animated based on the result of an api request which occurs every 30 seconds.

As there was some confusion I have added both check and cross now. There are methods in both component.ts files and one in app.component.ts which can be used.

Rohit.007 · Accepted Answer · 2018-08-01 16:14:56Z

1

I have made the code changes for you please check it

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

You can switch the status according to your API response

These changes can be used as per your API response.

  status = 'check';

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

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

I have added check svg for your help and added 2 buttons for events ( In your case your can call those methods based on the API response)

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

edited Aug 1, 2018 at 16:14

answered Aug 1, 2018 at 15:53

Rohit.007

3,5123 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Arnaud Denoyelle Over a year ago

Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline.

Questioning Over a year ago

Sorry but perhaps my question was not clear. I have a different component for check, and a different one for cross. I would like to be able to call "restart" on the component and have the animation play from the beginning. I have updated the stackblitz for clarity.

Rohit.007 Over a year ago

Both the Cross & Check will be rendered separately or both will be there on the page simultaneously?

Rohit.007 Over a year ago

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

Questioning Over a year ago

@Rohit.007 Sorry, I didn't see your replies as I wasn't tagged. Thanks for the update!

Collectives™ on Stack Overflow

Angular - Restarting a css animation

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related