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

   
  }
}

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

Angular 13, animate a clicked element while leveraging a single animation block

javascript

typescript

angular

angular-animations

angular13