Angular 13，在利用单个动画块的同时为单击的元素设置动画

Question

我正在创建一个简单的单页网站(主要是为了学习Angular(，似乎不知道如何使用单个动画来影响不同的DOM元素。我可以为每个元素定义动画，但这似乎非常无效。

有没有一种方法可以在不为每个元素定义单独动画块的情况下，在单击的按钮内设置图像动画？

谢谢，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;
}
}

Answer 1

是的，可以使用单个动画块

这里的问题是，您使用的是单个isOpen变量和影响该变量的单个finishedChore()函数，所以当单击其中一个按钮时，所有按钮都会发生变化，所以我的建议看起来像这个

<button mat-flat-button (click)="finishedChore('morning')">
<img [@openClose]="ismorning" src="assets/images/morning.png" />
</button>
<button mat-flat-button (click)="finishedChore('poop')">
<img [@openClose]="ispoop" src="assets/images/poop.png" />
</button>
<button mat-flat-button (click)="finishedChore('cleanRoom')">
<img [@openClose]="iscleanRoom" src="assets/images/cleanRoom.png" />
</button>
<button mat-flat-button (click)="finishedChore('cleanSinks')">
<img [@openClose]="iscleanSinks" src="assets/images/cleanSinks.png" />
</button>
<button mat-flat-button (click)="finishedChore('evening')">
<img [@openClose]="isevening" src="assets/images/evening.png" />
</button>

.ts文件

import { Component, OnInit } from "@angular/core";
import {
trigger,
state,
style,
animate,
transition
} from "@angular/animations";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
animations: [
trigger("openClose", [
state("false", style({ backgroundColor: "" })),
state("true", style({ backgroundColor: "blue" })),
transition("false<=>true", [animate("0.3s 0.0s ease-in")])
])
]
})
export class ChoreListComponent implements OnInit {
//flower list can be done dynamically 
isevening = false;
iscleanSinks = false;
ismorning = false;
ispoop = false;
iscleanRoom = false;
flowerList = ["morning", "poop", "cleanSinks", "cleanRoom", "evening"];
ngOnInit(): void {}
finishedChore(flowerClicked) {
this.flowerList.forEach((flowername) => {
let varName = "is" + flowername; // assume this as "is"+'noop'=>isnoop
console.log(varName);
if (flowerClicked == flowername) {
this[varName] = !this[varName];
} else {
this[varName] = false;
}
});

}
}