Angular中实现文字的渐变效果

基本思路是利用css中的transition属性，通过定义两个class，交替变更，实现淡入淡出的效果。

两个class的属性分别为

.message{
  color:#ff0000;
  transition:2s linear all;
  opacity:0;
}

.messageWrong{
  color:#ff0000;
  opacity:1;
}

第一个message表示正常情况下，字体为红色（或自定义为其他颜色，因为透明度为0，不会显示），透明度为0（使用display:none也可以）。

第二个messageWrong表示异常情况下，字体改为红色，透明度为1。由于transition的存在，会产生过渡的效果，也就是所谓的渐变。

Angular中可以使用ngClass来绑定作用域的class，实现动态的修改，而不需要借助于DOM。

<ion-item [ngClass]="fade()">{{errorText}}</ion-item>

这里定义了一个fade方法，根据错误与否，是否显示效果。

然后在TS中根据需求对其编写实现

fade(){
  if(this.wrong==true){
    this.statusClass.messageWrong=true;
    let _this=this;
    setTimeout(()=>_this.statusClass.messageWrong=false,2000);
    this.wrong=false;
  }
  return this.statusClass;
}

这里用wrong变量来决定是否要执行效果。wrong为true的时候，将messageWrong这个class改为true，进行显示。

然后用setTimeOut方法来做一个延时，过一定时间将其恢复，做一个渐变再恢复的过程（注意延时时间和transition定义的过渡时间要相等，因为transition的过渡时间是效果执行完毕的时间，如果想在执行完成前，或过后一阵子在恢复，可以自行设置）。如果不需要恢复，将延时的方法删除即可。

注：ngClass会覆盖标签下class属性中的所有内容，所以statusClass中也要定义一个message=true，否则该标签将会失去message这个class属性。

this.statusClass = {message:true, messageWrong:false};