css - 如何从一组颜色中动态地脉动文本颜色？

Question

我有一个 <span [innerHTML]="myHTML" [className]="myColor"></span>我需要将 innerHTML 文本无限地从一种颜色更改为另一种颜色。颜色的数量可能会有很大差异，所以如果可能的话，我不想编写一堆 CSS 动画。

我尝试使用 async功能与 while像这样循环:
async colorChangeFunc(colors: string[]) {
while(this.flagCalcComplete) {
for (let i = 0; i < colors.length; i++) {
this.myColor = colors[i];
setTimeout(null, 1000);
}
}
}

在哪里colors是对应于 CSS 类的字符串数组。但是，我误解了如何async在 TS 中工作，它当然会导致浏览器崩溃。

Answer 1

在循环中使用i * 1000并设置style.color

See working code

HTML

<span [style.color]="myColor">Hello angular</span>

TS

   for (let i = 0; i < this.colors.length; i++) {
        setTimeout(()=>{
         this.myColor = this.colors[i];
        }, i * 1000);
    }
  }