原生js与angularJS实现点击出现水纹的效果

最近看到了AngularJS-material的网站，看到里面有一个点击出现水纹的效果，非常漂亮。可以看到点击上面的元素的时候，元素会出现水波荡漾的效果，我想了一下实现原理，主要借助CSS3的transform:scale()来实现的。

如下图

水纹效果.png

首先介绍一下原理，第一步是在点击元素中动态添加一个span标签，然后为这个标签设置初始类名和相对于父节点的位置。这里需要有两点注意：（1）初始类名，要让添加span标签缩放为0，代码如下：

-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0)

（2）要通过监听事件来实现动态改变添加span标签的位置，让其永远位于鼠标点击的中点。代码如下

x=event.pageX-this.offsetLeft-CSS(span,'width')/2;
y=event.pageY-this.offsetTop-CSS(span,'height')/2;

第二步是每次在动态添加这个span标签的时候，都要把上一个添加的删除，让其新添加的时候，可以继续添加类名。

第三步是通过CSS3的方式实现水纹的效果，代码如下：

.animate{
    -webkit-animation: ripple .5s linear;
    -moz-animation: ripple .5s linear;
    -ms-animation: ripple .5s linear;
    -o-animation: ripple .5s linear;
    animation: ripple .5s linear
}
@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(1.5)
    }
}
@-moz-keyframes ripple {
    100% {
        opacity: 0;
        -moz-transform: scale(0.5)
    }
}
@-o-keyframes ripple {
    100% {
        opacity: 0;
        -o-transform: scale(0.5)
    }
}
@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(0.5)
    }
}

下面是两种实现方式，第一种是原生js实现的，第二种是通过angularJS实现的。下面是效果

实现效果.png

原生JS实现代码：

AngularJS实现方法：