Angular中实现文字的渐变效果
2017-04-10 00:02
621 查看
基本思路是利用css中的transition属性,通过定义两个class,交替变更,实现淡入淡出的效果。
两个class的属性分别为
第一个message表示正常情况下,字体为红色(或自定义为其他颜色,因为透明度为0,不会显示),透明度为0(使用display:none也可以)。
第二个messageWrong表示异常情况下,字体改为红色,透明度为1。由于transition的存在,会产生过渡的效果,也就是所谓的渐变。
Angular中可以使用ngClass来绑定作用域的class,实现动态的修改,而不需要借助于DOM。
这里定义了一个fade方法,根据错误与否,是否显示效果。
然后在TS中根据需求对其编写实现
这里用wrong变量来决定是否要执行效果。wrong为true的时候,将messageWrong这个class改为true,进行显示。
然后用setTimeOut方法来做一个延时,过一定时间将其恢复,做一个渐变再恢复的过程(注意延时时间和transition定义的过渡时间要相等,因为transition的过渡时间是效果执行完毕的时间,如果想在执行完成前,或过后一阵子在恢复,可以自行设置)。如果不需要恢复,将延时的方法删除即可。
注:ngClass会覆盖标签下class属性中的所有内容,所以statusClass中也要定义一个message=true,否则该标签将会失去message这个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};
相关文章推荐
- jQuery实现的立体文字渐变效果
- CSS3下的渐变文字效果实现
- 实现文字的渐变效果
- CATextLayer与CAGradientLayer实现文字渐变的动画效果
- iOS实现文字渐变效果
- 用CSS3可以很简单地实现文字渐变效果
- 自定义TextView 实现文字渐变效果
- 实现文字的颜色渐变效果 CAGradientLayer(渐变色图层)
- 神奇!js+CSS+DIV实现文字颜色渐变效果
- 实现文字的渐变效果(无边框图片气泡)
- js实现类似光照的炫彩文字渐变视觉冲击效果
- android实现文字渐变效果和歌词进度的效果
- jQuery实现的文字hover颜色渐变效果实例
- iOS文字渐变效果实现
- CSS3下的渐变文字效果实现
- 用CSS3实现文字渐变效果
- 实现文字渐变的效果
- jQuery实现的文字hover颜色渐变效果实例
- iOS实现文字渐变效果
- Android的实现文字渐变效果和歌词进度的效果