Angular Animation triggered only when spamming click

I am working with angular 17.0.0 and I'm trying to do a simple toggle button, but when I want to add some micro-animation, something went wrong.

The animation is triggered only when you spam click the button.

More precisely, the 1st time to click, nothing happened, but if you click again on the button during the time when the animation should run, it runs, otherwise, no.

to understand better : let say the animation is 3sec long

• 1st click: nothing happened
• 2nd click: you wait 1sec after the previous click : animation runs !
• 3rd click: you wait 4sec after the previous click :nothing happened

There is my template :

<div
(click)="onClick()"
[@fadeBg]="value ? 'on' : 'off'"
[ngClass]="{
'border-1 hover:bg-dark-3': value,
'bg-dark-90 color-light-100': !value,
}"
class="flex h-3rem align-items-center px-3-5 gap-2-5 border-round cursor-pointer">
<i
[class]="
'text-2xl pi ' + (value ? options.true.icon : options.false.icon)
"></i>
<p>{{ value ? options.true.label : options.false.label }}</p>
</div>


and the animation trigger:

trigger('fadeBg', [
state('on', style({})),
state('off', style({})),
transition('on <=> off', [
animate('300ms ease-in-out', style({ width: '*', backgroundColor: '*' })),
]),
])


here value is a boolean représenting the state of the button and options is an object with two attributes : true and false which are both objects with two attributes too: label and icon bothb string

I've tried to use :enter :leave expession but nothing change same for void and *

Continue reading...