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

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

水纹效果.png

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

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

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

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

第二步是每次在动态添加这个<code>span</code>标签的时候，都要把上一个添加的删除，让其新添加的时候，可以继续添加类名。<p>
第三步是通过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实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #content{
        width: 200px;
        height: 50px;
        border: 1px solid gray;
        background: slateblue;
        position: absolute;
        left: 123px;
        top: 321px;
        overflow: hidden;
    }
    .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
    }
    #content #spanStyle{
        border-radius: 75px;
        position: absolute;
        background: salmon;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0)
    }

    @-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)
        }
    }
</style>
<body>
    <div id="content">

    </div>
</body>
<script>
    window.onload= function () {
        var content=document.getElementById("content");
        var eventHandle= function (obj,type,fn) {
            if(obj.addEventListener){
                obj.addEventListener(type,fn,false)
            }else if(obj.attachEvent){
                obj.attachEvent('on'+type,fn)
            }
        };
        var setCSS3=function(obj,attr,value){
            var sTr="";
            var sVal="";
            var arr=["Webkit","Moz","O","ms",""];
            if(! obj["$Transform"])
            {
                obj["$Transform"]={};
            }
            obj["$Transform"][attr]=parseInt(value);
            for( sTr in obj["$Transform"])
            {
                switch(sTr)
                {
                    case 'scale':
                    case 'scaleX':
                    case 'scaleY':
                        sVal+=sTr+"("+(obj["$Transform"][sTr]/100)+") ";
                        break;
                    case 'rotate':
                    case 'rotateX':
                    case 'rotateY':
                        sVal+=sTr+"("+(obj["$Transform"][sTr])+"deg) ";
                        break;
                    case 'translateX':
                    case 'translateY':
                    case 'translateZ':
                        sVal+=sTr+"("+(obj["$Transform"][sTr])+"px) ";
                        break;
                }
            }
            for(var i=0;i<arr.length;i++)
            {
                obj.style[arr[i]+"Transform"]=sVal;
            }
        };
        var CSS= function (obj,attr,value) {
            if(arguments.length==2){//查看有有几个参数，如果有两个参数就执行，此时为获取css属性值
                if(attr=='scale'|| attr=='rotate'|| attr=='rotateX'||attr=='rotateY'||attr=='scaleX'||attr=='scaleY'||attr=='translateY'||attr=='translateX')//如果是css3中的属性
                {
                    if(! obj.$Transform)
                    {
                        obj.$Transform={};
                    }
                    switch(attr)
                    {
                        case 'scale':
                        case 'scaleX':
                        case 'scaleY':
                            return typeof(obj.$Transform[attr])=='number'?obj.$Transform[attr]:100;//判断obj.$Transform[attr]是否属于number类型，如果是就返回相应值
                            break;
                        default:
                            return obj.$Transform[attr]?obj.$Transform[attr]:0;
                    }
                }//如果不是CSS3样式
                var sCur=obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr];//传统css属性返回
                if(attr=='opacity'){
                    return Math.round((parseFloat(sCur)*100));
                }
                else{
                    return parseInt(sCur);
                }
            }
            else if(arguments.length==3)//如果有3个参数，此时为设置css属性
            {
                switch(attr){ //如果为css3属性，就用css3设置函数。
                    case 'scale':
                    case 'scaleX':
                    case 'scaleY':
                    case 'rotate':
                    case 'rotateX':
                    case 'rotateY':
                    case 'translateZ':
                    case 'translateX':
                    case 'translateY':
                        setCss3(obj, attr, value);
                        break;
                    case 'width':
                    case 'height':
                    case 'paddingLeft':
                    case 'paddingTop':
                    case 'paddingRight':
                    case 'paddingBottom':
                        value=Math.max(value,0);
                    case 'left':
                    case 'top':
                    case 'marginLeft':
                    case 'marginTop':
                    case 'marginRight':
                    case 'marginBottom':
                        if(typeof value=="string")
                        {
                            obj.style[attr]=value;
                        }
                        else
                        {
                            obj.style[attr]=value+'px';
                        }
                        break;
                    case 'opacity':
                        obj.style.filter="alpha(opacity:"+value+")";
                        obj.style.opacity=value/100;
                        break;
                    default:
                        obj.style[attr]=value;
                }
            }
            return function (attr_in, value_in){css(obj, attr_in, value_in)};
        };
        var hasClassName=function(obj,className){
            var isSpourtClassList='classList' in document.documentElement;
            if(isSpourtClassList){
                return obj.classList.contains(className)
            }else{
                var isContain=obj.className.indexOf(className)>-1;
                return isContain;
            }
        };
        var addClass= function (obj,className) {
            var isSpourtClassList='classList' in document.documentElement;
            if(isSpourtClassList){
                if(hasClassName(obj,className)!=true){
                    obj.classList.add(className)
                }
            }else{
                if(hasClassName(obj,className)!=true){
                    obj.className+=obj.className
                }
            }
        };
        var removeClass= function (obj, className) {
            var isSpourtClassList='classList' in document.documentElement;
            if(isSpourtClassList){
                if(hasClassName(obj,className)){
                    obj.classList.remove(className)
                }
            }else{
                if(hasClassName(obj,className)){
                    obj.className-=obj.className
                }
            }
        }
        var animate= function (target) {
            this.obj=target;
        };
        animate.prototype={
            addEffect: function () {
                var that=this;
                var span=document.createElement("span");
                span.setAttribute("id","spanStyle");
                //var spanRemove=that.obj.
                eventHandle(that.obj,'click', function (e) {
                    var event=e ||window.event;
                    var x;
                    var y;
                    var spanS=document.getElementById("spanStyle");
                    if(spanS){
                        that.obj.removeChild(spanS);
                    }
                    that.obj.appendChild(span);
                    CSS(span,"width",150);
                    CSS(span,"height",150);
                    x=event.pageX-this.offsetLeft-CSS(span,'width')/2;
                    y=event.pageY-this.offsetTop-CSS(span,'height')/2;
                    CSS(span,"left",x);
                    CSS(span,"top",y);
                    addClass(span,"animate");

                },false)
            },
            removeEffect: function () {

            }
        };

        state.changeFront(new animate(content));//调用一次只产生一个span

    };
    var state= function () {//状态控制函数
        var currentState=null;
        return{
            changeFront: function (handle) {
                    currentState=handle;
                    currentState.addEffect();
            },
            changeBack: function (handle) {
                    currentState=handle;
                    currentState.removeEffect();

            }
        }
    }()
</script>
</html>

AngularJS实现方法：

<!DOCTYPE html>
<html lang="en" ng-app="animateDemo">
<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="lib/angular.min.js" type="text/javascript"></script>
  <script src="lib/angular-animate.js" type="text/javascript"></script>
  <script src="lib/jquery-2.1.4.min.js" type="text/javascript"></script>
  <style>
    .spanStyle{
      width: 200px;
      height: 50px;
      position: absolute;
      left: 200px;
      top: 60px;
      background: slateblue;
      overflow: hidden;
    }
    .spanStyle .animateSpan{
      position: absolute;
      background: saddlebrown;
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
    }
    .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(1.5);
      }
    }
    @-o-keyframes ripple {
      100%{
        opacity: 0;
        -o-transform: scale(1.5);
      }
    }
    @keyframes ripple {
      100%{
        opacity: 0;
        transform: scale(1.5);
      }
    }
  </style>
</head>
<body ng-controller="animateController">
  <div>
    <span-click></span-click>
  </div>
</body>
<script>
  var app=angular.module('animateDemo',["templateCache","serviceModule","directiveModule"])
    .controller("animateController",['$scope','createEffect', function ($scope,createEffect) {

    }])
  var service=angular.module("serviceModule",[])
    .factory("createEffect",["$animate","$compile","$rootScope", function ($animate,$compile,$rootScope) {
      var x;
      var y;
      var span=angular.element("<span class='animateSpan'></span>");
      var scopeNew=$rootScope.$new(true);
      var spanEffect=$compile(span)(scopeNew);
      return{
        addEffect: function (obj) {
          obj.on("click", function (e) {
            var e=e||event;
            obj.empty();
            $animate.enter(spanEffect,obj);
            x= e.pageX-this.offsetLeft-parseInt($(obj).find("span").css("width"))/2;
            y= e.pageY-this.offsetTop-parseInt($(obj).find("span").css("width"))/2;
            $(obj).find("span").css("left",x);
            $(obj).find("span").css("top",y);
            obj.find("span").addClass("animate");
          })
        }
      }

    }])
    var directive=angular.module("directiveModule",["serviceModule"])
    .directive("spanClick",["$animate","$compile","createEffect", function ($animate,$compile,createEffect) {
      return{
        restrict:'EA',
        replace:true,
        templateUrl:'spanClick.html',
        link: function (scope, ele, attr) {
        /*  var x;
          var y;
          var span=angular.element("<span class='animateSpan'></span>");
          //span.attr("class","animateSpan");
          var scopeNew=scope.$new(true);
          var spanEffect=$compile(span)(scopeNew);
          ele.bind("click", function (e) {
            ele.empty();
            $animate.enter(spanEffect,ele);
            x= e.pageX-this.offsetLeft-parseInt($(ele).find("span").css("width"))/2;
            y= e.pageY-this.offsetTop-parseInt($(ele).find("span").css("width"))/2;
            $(ele).find("span").css("left",x);
            $(ele).find("span").css("top",y);
            ele.find("span").addClass("animate");
          })*/
          createEffect.addEffect(ele)
        }
      }
    }])
  var templateCache=angular.module('templateCache',[])
    .run(function ($templateCache) {
      $templateCache.put("spanClick.html","<div  class='spanStyle'></div>")
    })
</script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,869评论 18赞 139
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,792评论 1赞 92
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,076评论 25赞 708
  • Bootstrap（基础二）
    第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根...
    凛0_0阅读 5,045评论 0赞 66
  • 关于梦
    做梦也是一门艺术，对于自己来说，只要睡觉就会做梦，从来不觉得会影响睡眠，反而认为它是我生活当中必不可少的...
    星飒说阅读 360评论 2赞 2