是否有更好的方法来更改单击按钮的不透明度和背景？

Question

我正在尝试让屏幕在 Ionic/Angular 中工作，可以按下不同的按钮并更改其不透明度，直到达到阈值，然后更改按钮的颜色。下图提供了概述：

我当前的实现正在工作，但我认为应该有更好的方法来实现这一点，因为它在所有 if 情况下看起来都有点糟糕，而且我不确定这是否是访问按钮并编辑其不透明度的正确方法。

我的实现：

校准.page.ts

const BUTTONS = [
  { id: 1, opacity: 1.0 },
  { id: 2, opacity: 1.0 },
  { id: 3, opacity: 1.0 },
  { id: 4, opacity: 1.0 },
  { id: 5, opacity: 1.0 },
  { id: 6, opacity: 1.0 },
  { id: 7, opacity: 1.0 },
  { id: 8, opacity: 1.0 },
  { id: 9, opacity: 1.0 }
]

export class CalibrationPage implements OnInit {

  buttons = BUTTONS;

  @ViewChild('Pt0') button0: any;
  @ViewChild('Pt1') button1: any;
  @ViewChild('Pt2') button2: any;
  @ViewChild('Pt3') button3: any;
  @ViewChild('Pt4') button4: any;
  @ViewChild('Pt5') button5: any;
  @ViewChild('Pt6') button6: any;
  @ViewChild('Pt7') button7: any;
  @ViewChild('CalibrationPoint') buttonCalibration: any;

buttonClicked(buttonId: any) {
    if (buttonId == 0) {
      this.buttons[buttonId].opacity -= 0.2;
      if (this.buttons[buttonId].opacity > 0.1) {
        this.button0.el.style.setProperty('--opacity', this.buttons[buttonId].opacity)
      } else {
        this.button0.el.style.setProperty('--background', 'red')
        this.button0.el.style.setProperty('--opacity', '1.0')
      }
    } else if (buttonId == 1) {
      this.buttons[buttonId].opacity -= 0.2;
      if (this.buttons[buttonId].opacity > 0.1) {
        this.button1.el.style.setProperty('--opacity', this.buttons[buttonId].opacity)
      } else {
        this.button1.el.style.setProperty('--background', 'red')
        this.button1.el.style.setProperty('--opacity', '1.0')
      }
          ... and so on for all the other buttons

校准.page.html

<ion-grid>
  <ion-row>
    <ion-col>
      <ion-button #Pt0 id="Pt0" shape="circle" size="small" (click)="buttonClicked(0)">
        <ion-icon slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
    <ion-col>
      <ion-button #Pt1 id="Pt1" shape="circle" size="small" (click)="buttonClicked(1)">
        <ion-icon slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-button #Pt2 id="Pt2" shape="circle" size="small" (click)="buttonClicked(2)">
        <ion-icon slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-button #Pt3 id="Pt3" shape="circle" size="small" (click)="buttonClicked(3)">
        <ion-icon slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
    <ion-col>
      <ion-button #CalibrationPoint id="CalibrationPoint" shape="circle" size="small" disabled="true" (click)="buttonClicked(8)">
        <ion-icon slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
    <ion-col>
      <ion-button #Pt4 id="Pt4" shape="circle" size="small" (click)="buttonClicked(4)">
        <ion-icon slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-button #Pt5 id="Pt5" shape="circle" size="small" (click)="buttonClicked(5)">
        <ion-icon slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-button #Pt6 id="Pt6" shape="circle" size="small" (click)="buttonClicked(6)">
        <ion-icon slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
    <ion-col>
      <ion-button #Pt7 id="Pt7" shape="circle" size="small" (click)="buttonClicked(7)">
        <ion-icon slot="icon-only"></ion-icon>
      </ion-button>
    </ion-col>
  </ion-row>
</ion-grid>

有人可以在这里帮助我和/或提供实现我想要的东西的技巧吗？

Answer 1

第一个是使用 .css 为“点”设置动画。如果，例如你定义一个 .css 就像

.dot {
  background-color: silver;
  border-radius: 50%;
  height: 1rem;
  width:1rem;
}
.dot.animate{
  background:red;

  animation:
  3s 1 alternate fade;
}
@keyframes fade {
  0% {
    opacity: 1;
    background:silver;
  }
  99% {
    opacity: 0;
    background:silver;
  }
  100%
  {
    opacity:1;
  }
}
.dot.show{
  background-color:silver;
}

我们可以看到，唯一的方法就是用一个类替换另一个类。想象一些简单的

<div #dot class="dot show" (click)="animate(dot)"></div>

还有动画功能

  animate(element:HTMLElement)
  {
    element.classList.remove("show");
    element.classList.add("animate");
  }

看到，在 Angular 中，当我们使用模板引用变量并在 .html 中使用时，我们会传递 HTMLElement。小心！，如果我们使用

@ViewChild

，我们会得到一个 ElementRef （在 elementRef.nativeElement 中，我们“到达”HTLMElement）

嗯，我想你需要“更多”来“动画”按钮。所以，不使用ViewChild，否则使用ViewChildren。 ViewChildren 是一个查询列表 所以如果我们有一些喜欢的

@for(i of [1,2,3,4]; track $index)
{
<div  #dot class="dot show" [attr.data-index]="i" 
    (click)="animate($index)"></div> //<--I choose now pass the index
}

我们的动画现在可以了

  //declare first a variable message and ViewChildren
  message:string=""
  @ViewChildren('dot') dots!:QueryList<ElementRef>

  animate(index:number)
  {
    const dot=this.dots.find((x:ElementRef,i:number)=>i==index)
    dot?.nativeElement.classList.remove("show");
    dot?.nativeElement.classList.add("animate");
    this.message="You click the "+
         dot?.nativeElement.getAttribute('data-index')+ " dot"
  }

a stackblitz（它只是有角度的）