How to loop angular animations

Ionic Framework ionic-v3
1

Hello guys,

I finally managed to make Angular 5 BrowserAnimationsModule work on my app.
Now I need to find a way to loop the animation infinitely.
How can I do this?
How can I make it repeat the same animation after a certain period of time?

Here’s my code:

 animations: [
    trigger('color1', [
      state('default', style({
        backgroundColor: 'orange'
  
      })),
      state('clicked', style({
        backgroundColor: 'blue'
      
      })),
      transition('default => clicked', animate('5s 500ms ease-in')),
      transition('clicked => default', animate(300))
      ])

Thanks,

2

Use Observable.interval to reset the state.

1 Like
3

Thanks again Aaron, really appreciated.
How can I do that on Angular 5 typescript? is there any example I can find on the web?

4

I don’t know about an example, but you could just have Observable.interval fire every 3 seconds (or whatever) and whenever it fires, you reset your animation to the starting state. You probably would have to call ChangeDetectorRef.detectChanges() so Angular knew it happened, that’s the only wrinkle I can think of.

1 Like
5

I will search about it. An example would be nice though. Unfortunately looping angular animation isn’t as easy as looping CSS3 animations.

Thanks,

6

You could just use CSS3 animations if you already know how to do that.

1 Like
7

I’m trying to trigger a series of animation with a click of button.
So once you click on a button it should affect several div’s styles with different time transition.

Is there a way to add CSS animation class with a button click?

Oh yes… maybe that’s a possibility!
[ngClass] can add or remove CSS class but how can I make a button affect many other divs ? with different transition time?

8

I’m not sure how to do it in CSS. You can set a delay in Angular animations to have a cascade of the type you’re referring to. Seems like a good fit.

1 Like
9

Yes, this is pretty complicated. I will try both today and see what I can get…
Thanks for suggesting many good ideas! :sunglasses:

10

In fact, I think you’re right.

I can create CSS3 animation keyframes into a css class then add or remove it using a button and [ngClass].

This example works really well. It adds or removes animations using angular input and CSS animations allow you to loop & set interval easily.

Solution is found… thanks a lot

11

I am looking for such a solution where animation is working continuously without help of any checkbox like in your case, like for example in your case if box and circle are replacing each other after some interval until boxClass is been removed, please provide me such a solution if possible??