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

Question

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

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

谢谢你， 特里

<!-- 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;
      }
    });

   
  }
}