延时动画四部曲 
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

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

posted on 2015-01-04 16:17  meeming  阅读(225)  评论(0)  编辑  收藏  举报



Fork me on GitHub