延时动画四部曲

onCreate: function() {

        this.setView("leftMenu.html", {

            items : []

        });

        me.threeTrigger = iAuto.Util.bind(me,me.threeTrigger);

    },

... ...

releaseBtn : function(event){

        var me = this;

        setTimeout(me.threeTrigger(event),700);

    },

    threeTrigger : function(event){

        var me = this,$el = me.$element;

        return function()  

        {  

            me.returnTrigger(event);  

        }

    },

    returnTrigger : function(event){ 

        var me = this,$el = me.$element;



        var klass = $(event.target).data("klass");   

        $el.find("."+klass).removeClass("pressed");

        $el.trigger(klass);

    },

用setTimeout做延时会丢失上下文,所以首先绑了this,

然后这家伙还不能带参数,那么需要再写个函数,该函数返回一个不带参数的函数,详细转自

http://boleyn.iteye.com/blog/1144015

参看

http://blog.csdn.net/huanglan513/article/details/5669912

 动画方面我采用的时给after加上帧动画:

.left_menu .bigSize:after {

  content: "";

  position: absolute;

  top: 8px;

  left: 40px;

  width: 45px;

  height: 45px;

  display: block;

  z-index: -1;

  border-radius: 45px;

  opacity: 0;

  background-color: #373737;

}



.left_menu .bigSize:hover:after {

  -webkit-animation: boom 0.7s ease;

}



@-webkit-keyframes boom {

  0% {

    opacity: 0;

  }



  5% {

    -webkit-transform: scale(1.2);

    opacity: 0.5;

  }



  70% {

    -webkit-transform: scale(1.6);

    opacity: 0.8;

  }



  100% {

    -webkit-transform: scale(2.4);

    opacity: 1;

    width: 353px;

    height: 66px;

    display: block;

  }

}
drop

动画的质感需要物理基础,有空深入研究。

另外,为了防止连续点击产生动画之后setTimeout不能对应动画完成的事件,可以采用监听css3动画完成的事件,再执行要做的事。

<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<meta name="author" content="@my_programmer"> 

<title>webkitAnimationEnd</title> 

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 

<meta name="apple-mobile-web-app-capable" content="yes" /> 

<meta name="format-detection" content="telephone=no"/> 

<style type="text/css"> 

#div{ 

width:200px; 

height:200px; 

background:#f60; 

margin:100px auto; 

-webkit-transition: all ease 1s; 

} 

.change{ 

-webkit-animation: transform 1s 2 ease; 

} 

@-webkit-keyframes transform { 

10% { -webkit-transform: scale(1)} 

20% { -webkit-transform: scale(2)} 

50%{ -webkit-transform: scale(0.5)} 

100% { -webkit-transform: scale(1)} 

} 

</style> 

</head> 

<body> 

<div id="div"></div> 

<script type="text/javascript"> 

var tt = document.querySelector('#div'); 

tt.addEventListener("click", function(){ 

this.className = 'change'; 

}, false); 

tt.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 

this.className = this.className.replace('change', ' '); 

console.log(2); 

}, false); 

</script> 

</body> 

</html> 
webkitAnimationEnd

对按钮按压效果这类简单动画的回调尤其有效。

你可能感兴趣的:(动画)