Trying to get an intermittent effect using Angular animations-CodePudding

I am quite bad with animations in Angular and I want an intermittent effect for a new message in chat.

I tried this:

animations: [trigger('openClose', [
state('open', style({
  height: '200px',
  opacity: 1,
  backgroundColor: 'yellow'
})),
state('close', style({
  height: '100px',
  opacity: 1,
  backgroundColor: 'green'
})),
// ...
transition('* => *', [
  animate('2s', keyframes ( [
    while(newMessage){
      style({ opacity: 0.1, offset: 0.1 }),
      style({ opacity: 0.6, offset: 0.2 }),
      style({ opacity: 1,   offset: 0.5 }),
      style({ opacity: 0.2, offset: 0.7 })
    }
  ]))
])

])]

Ok that while gives an error and I am assuming the trigger its where I give the newMessage but how can I loop the animate so I get an intermittent effect until I change the state of newMessage ?

<div [@openClose]="isOpen ? 'open' : 'closed'"
   (@openClose.start)="onAnimationEvent($event)"
   (@openClose.done)="onAnimationEvent($event)"
   >
   Animation
</div>

Thank you.

CodePudding user response：

<div
  [@openClose]="isOpen"
  (@openClose.done)="isOpen = isOpen == 'open' ? 'close' : 'open'"
  
>
  Animation
</div>