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

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

1 个答案: