Цикл анимации идиоматически

Question

Я работаю в Angular, и у меня есть анимация для компонента, который я хотел бы зациклить, пока не придет уведомление из других мест.

    animations: [
    trigger('boxState', [
        state('begin', style({
            width: '100%',
        })),
        state('end', style({
            width: '0%',
        })),
        transition('end => begin', animate('2500ms')),
        transition('begin => end', animate('0ms'))
    ])
]

Я могу сделать цикл анимации, прослушивая события start и done анимации и изменяя boxState вручную, в зависимости от ситуации.

<div [@boxState]="boxState" (@boxState.start)="animationStarted($event)" (@boxState.done)="animationEnded($event)" ></div>

Однако это кажется странно обязательным способом работы, который идет вразрез с обычными декларативными идиомами Angular. Есть ли более идиоматический способ зацикливания анимации, который мне не хватает?

Answer 1

Я не собираюсь писать код для вас, но я дам вам источник, из которого вы можете решить свою проблему.

Исходный код: https://github.com/leonardopaiva/angular-animation-basic-project/tree/master/src/app/loop-demo

Демо-ссылка https://angular -animations-demo.firebaseapp.com / loop-demo

Если вы обнаружите какую-либо ошибку в следующем, вернитесь сюда

Счастливое кодирование