I am currently working on a one-page website project to enhance my Angular skills, and I'm facing a challenge with animating multiple DOM elements using a single animation. Defining the animation for each element individually seems like a cumbersome approach.
Is there a way to animate the image inside the clicked button without having to create separate animation blocks for each element?
Thank you, Terry
<!-- HTML: -->
<button mat-flat-button (click)="finishedChore()">
<img
[@openClose]="isOpen ? 'open' : 'closed'"
src="assets/images/morning.png"
/>
</button>
<button mat-flat-button (click)="finishedChore()">
<img
[@openClose]="isOpen ? 'open' : 'closed'"
src="assets/images/poop.png"
/>
</button>
<button mat-flat-button (click)="finishedChore()">
<img
[@openClose]="isOpen ? 'open' : 'closed'"
src="assets/images/cleanRoom.png"
/>
</button>
<button mat-flat-button (click)="finishedChore()">
<img
[@openClose]="isOpen ? 'open' : 'closed'"
src="assets/images/cleanSinks.png"
/>
</button>
<button mat-flat-button (click)="finishedChore()">
<img
[@openClose]="isOpen ? 'open' : 'closed'"
src="assets/images/evening.png"
/>
</button>
// .ts file
import { Component, OnInit } from '@angular/core';
import {
trigger,
state,
style,
animate,
transition,
} from '@angular/animations';
@Component({
selector: 'app-chore-list',
templateUrl: './chore-list.component.html',
styleUrls: ['./chore-list.component.scss'],
animations: [
trigger('openClose', [
state('closed', style({ backgroundColor: '' })),
state('open', style({ backgroundColor: 'blue' })),
transition('closed<=>open', [animate('0.3s 0.0s ease-in')]),
]),
],
})
export class ChoreListComponent implements OnInit {
isOpen = false;
constructor() {}
ngOnInit(): void {}
finishedChore() {
this.isOpen = !this.isOpen;
}
}