Estoy creando un sitio simple de una sola página (principalmente para aprender Angular), y parece que no puedo entender cómo usar una sola animación para afectar diferentes elementos DOM. Podría definir la animación para cada elemento, pero eso parece extremadamente ineficaz.
¿Hay alguna forma de animar la imagen dentro del botón en el que se hizo clic sin definir un bloque de animación separado para cada elemento?
gracias 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; } }sí, es posible usar un solo bloque de animación
aquí el problema es que está utilizando una sola variable isOpen y una sola función finishChore finishedChore() que afecta a esta variable, por lo que cuando se hace clic en uno de los botones, cambiará para todos, por lo que mi sugerencia sería así
<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>el archivo .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; } }); } }