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