Ripple 点击波纹
简介
ripple插件可实现在按钮、卡片、图片等元素上实现连续点击连续波纹效果，使用该插件可增强页面与用户的交互能力。波纹的颜色默认是半透明黑色，动画由近及远向外渐变扩散。
使用方法
插件运行方式有两种：
- ax*属性：对非自闭型标签使用
axRipple属性即可按默认参数运行插件。 - js实例：通过
new axRipple('#ID')方式创建实例运行。
注意：input、img等是自闭型标签，不可使用。
-
<a href="###" class="ax-btn" axRipple>使用属性创建</a> <a href="###" class="ax-btn" id="ripple">使用new创建</a> -
new axRipple('#jsIns');
应用于按钮
对按钮元素追加axRipple属性即可。
<a href="###" class="ax-btn ax-primary" axRipple>彩色实体按钮</a>
<a href="###" class="ax-btn ax-primary ax-line" axRipple>彩色线状按钮</a>
<button type="button" class="ax-btn ax-question" axRipple>提交button</button>
由于<input type="submit" />元素是自闭型标签，在内部不能创建波纹其他标签，所以该元素不适用波纹效果！
应用于卡片
对卡片列表中的ax-figure封面图片元素追加axRipple属性即可。
-
意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。362 2019年1月2日 -
<ul class="ax-grid ax-grid-2 ax-space-xxl">
<li>
<div class="ax-card">
<div class="ax-card-header">
<a href="###" poster axRipple><img src="https://src.axui.cn/v2.0/public/images/image-8.jpg" /></a>
</div>
<div class="ax-card-body">
<div caption> <a href="###">“水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹</a></div>
<div brief>意大利“水城”威尼斯12日遭遇有记录以来严重程度排第二的水灾，市长路易吉·布鲁尼亚罗有意宣布紧急状态，说这场水灾恐致惨重损失。</div>
<div byline>
<span><i class="ax-iconfont ax-icon-message-o"></i> 362</span>
<span>2019年1月2日</span>
</div>
</div>
</div>
</li>
<li>
<div class="ax-card">
<div class="ax-card-header">
<a href="###" poster axRipple><img src="https://src.axui.cn/v2.0/public/images/image-7.jpg" /></a>
</div>
<div class="ax-card-body">
<div caption> <a href="###">欧洲最长屋桥盛不下千年传奇</a></div>
<div brief>埃尔福特是图林根州首府，在中世纪就是该地区的经济重镇。 它位于南北交通要道的中心位置，很多贸易物流要通过这里。格拉河从埃尔福特市中心穿过。</div>
<div keywords>关键字：<i>威尼斯</i><i>暴雨</i><i>最高纪录</i></div>
</div>
</div>
</li>
</ul>
应用于头像
对头像的ax-avatar封面图片元素追加axRipple属性即可。
<a href="###" class="ax-avatar ax-xxs" axRipple style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a>
<a href="###" class="ax-avatar ax-xs" axRipple style="background-image: url(https://src.axui.cn/v2.0/public/images/head02.jpg)"></a>
<a href="###" class="ax-avatar ax-sm" axRipple style="background-image: url(https://src.axui.cn/v2.0/public/images/head03.jpg)"></a>
<a href="###" class="ax-avatar ax-md" axRipple style="background-image: url(https://src.axui.cn/v2.0/public/images/head04.jpg)"></a>
<a href="###" class="ax-avatar" axRipple style="background-image: url(https://src.axui.cn/v2.0/public/images/head05.jpg)"></a>
<a href="###" class="ax-avatar ax-lg" axRipple style="background-image: url(https://src.axui.cn/v2.0/public/images/head06.jpg)"></a>
<a href="###" class="ax-avatar ax-xl" axRipple style="background-image: url(https://src.axui.cn/v2.0/public/images/head07.jpg)"></a>
<a href="###" class="ax-avatar ax-xxl" axRipple style="background-image: url(https://src.axui.cn/v2.0/public/images/head08.jpg)"></a>
彩色波纹
通过theme参数改变波纹的背景色，theme可填入6中彩色风格，分别是：primary、error、success、warning、info、question。
<a href="###" class="ax-btn ax-line ax-primary" axRipple="theme:'primary'">primary</a>
<a href="###" class="ax-btn ax-line ax-success" axRipple="theme:'success'">success</a>
<a href="###" class="ax-btn ax-line ax-error" axRipple="theme:'error'">error</a>
<a href="###" class="ax-btn ax-line ax-warning" axRipple="theme:'warning'">warning</a>
<a href="###" class="ax-btn ax-line ax-info" axRipple="theme:'info'">info</a>
<a href="###" class="ax-btn ax-line ax-question" axRipple="theme:'question'">question</a>
散开速度
参数duration为光晕持续时间，通过该参数可改变波纹的散开速度，默认值为600（单位ms），removeTime为创建光晕后延迟删除光晕节点的时间，默认值为800（单位ms），duration应该小于removeTime。
<a href="###" class="ax-btn ax-long" axRipple>正常状态</a>
<a href="###" class="ax-btn ax-long" axRipple="duration:800">光晕散开慢了</a>
<a href="###" class="ax-btn ax-long" axRipple="duration:1000,removeTime:1000">更慢了</a>
<a href="###" class="ax-btn ax-long" axRipple="duration:200">飞快</a>