I am attempting to create an animation that changes the opacity of three arrows (intended for user interaction on my website). To achieve this automatically and repeatedly upon loading the webpage, I have implemented a setInterval function within ngOnInit. While this method successfully alters the variable state, I have noticed that the animation only functions properly when triggered by an event like (click)="showArrows" as opposed to setInterval.
@Component({
selector: 'app-photo-and-name',
templateUrl: './photo-and-name.component.html',
styleUrls: ['./photo-and-name.component.css'],
animations: [
trigger('animateArrows', [
state('inactive', style({
opacity: '1'
})),
state('active', style({
opacity: '0.5',
})),
transition('inactive => active', animate('400ms ease-in')),
transition('active => inactive', animate('400ms ease-in'))
])
]
})
export class PhotoAndNameComponent implements OnInit {
arrowsState: string = 'inactive';
interval: any;
constructor() { }
ngOnInit(): void {
this.interval = setInterval(this.showArrows, 2000);
}
showArrows() {
this.arrowsState = this.arrowsState === 'active' ? 'inactive' : 'active';
console.log(this.arrowsState);
}
}
<div class="arrows" [@animateArrows]="arrowsState">
<mat-icon class="arrow">arrow_drop_down</mat-icon>
<mat-icon class="arrow">arrow_drop_down</mat-icon>
<mat-icon class="arrow">arrow_drop_down</mat-icon>
</div>
Why does the animation not work with setInterval and what alternative approach should be taken?