ion-input下划线与水波纹

【页面效果优化 1】下划线与水波纹

 

stormKid 关注

2018.04.17 17:02 字数 735 阅读 10评论 0喜欢 0

现阶段页面体验和动态效果很被用户重视，由于之前都是面向对象编程，所以对于CSS动态效果有所忽略，现在要求越来越高，不得不面向CSS编程了，在实现页面动态效果的同时，并想记录下来以后搭建更多项目的时候快速复用，故开篇此类博客进行详细探究CSS动态效果。

1、ion-input下划线效果

效果展示.gif

1.1、Css属性

.input-text{position: relative;padding:1%;font-size:1.2rem;margin-bottom:1%;text-decoration: none;color:#fff;}.input-text:after{content:"";position: absolute;left:0;bottom: -2px;height:2px;width:100%;background:#fff;transform:scale(0);transition: all0.3s;}.flag:after{transform:scale(1);}

1.2、HTML使用

1.3、技巧与细节

1.3.1、（ionFocus）与 （ionBlur）

根据ionic官方API，此两种监听方法共同封装到ion-input中，记录ion-input的状态，ionFocus即为输入框焦点获取之上，输入时的状态，ionBlur即为点击其他地方，软键盘退出的状态。

1.3.2、flag赋值

根据angular的API，[class.xxx] 这个xxx即为SCSS文件中自定义的“.xxx{}”属性，让它通过数据绑定来进行判断是否使用“.xxx{}”属性来覆盖原来的属性与还原。

1.3.3、transform:scale(1)

关键触发点，即通过[class.xxx]语法绑定使用其覆盖前面的transform:scale(0)来完成动画显示

1.3.4、:after

CSS伪元素，专门动态控制CSS显示的，与之对应的还有:before，可以通过不同的事件发生来控制插入更多属性，从而完成动画展示。

1.3.5、 transition:all 0.3s

transition为动画过渡效果，参见此处【点击浏览】，这里伸缩的渐变效果即为此属性控制。

2、cardView点击水波纹效果

演示效果.gif

由于录像软件问题，调试显示点击出现严重拖影现象，不过可以看出具体细节效果，点击的时候CSS绘制的渐变效果实际上并不是非常理想的圆弧，有点颗粒渐变，不过在正常显示的情况下，这个过程很快，一般肉眼看不到具体细节变化。

2.1、Css属性

.ripple{position: relative;overflow: hidden;}.ripple:after{content:"";display: block;position: absolute;width:100%;height:100%;top:0;left:0;pointer-events: none;background-image:radial-gradient(circle, #666 10%, transparent 10%);background-repeat: no-repeat;background-position:50%;transform:scale(10, 10);opacity:0;transition: transform .3s, opacity .5s;}.ripple:active:after{transform:scale(0, 0);opacity: .3;transition:0s;}

2.2、HTML使用

xxxxxxx

2.3、技巧与细节

2.3.1、background-image: radial-gradient(circle, #666 10%,transparent 10%)

这是个径向渐变的属性，圆形并且中心到外部的颜色依次为#666和透明色。

2.3.2、transition: transform .3s,opacity .5s

扩展变化与透明度变化，这里非常考验人的想象能力，即在扩展过程中，透明度也必须发生变化，双重变化形成了水波纹的效果。

2.3.3、:active

顾名思义，点击选中时候所可以发生的变化插值，将对应的属性进行插值给使用此class 的标签。