'How to use animation-iteration-count with Angular Animations?

I have an animation that needs to fire every increment of items in my list. This works fine:

animations: [
    trigger('events', [
        transition(':increment', 
            animate('1.5s', keyframes([
                style({ boxShadow: '0 0 0 0 rgba(253, 57, 122, 0.7)', offset: 0 }),
                style({ boxShadow: '0 0 0 12px rgba(253, 57, 122, 0)', offset: 0.7 }),
                style({ boxShadow: '0 0 0 0 rgba(253, 57, 122, 0)', offset: 1 }),
            ]))
        ),
    ])
]
<div name="btn-event" (click)="toggleVisible()" [@events]="events?.length">

Which equates to something like this:

.events-animation {
    animation: events 1.5s;
}

@keyframes events {
    0% {
        box-shadow: 0 0 0 0 rgba(253, 57, 122, 0.7);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(253, 57, 122, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(253, 57, 122, 0);
    }
}

But I would like the animation to run more than once for each increment, something equivalent to the CSS animation-iteration-count:

.events-animation {
    animation: events 1.5s;
    animation-iteration-count: 3;
}

Is there any way to include this in Angular Animations?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source