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