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; 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; 353px; height: 66px; display: block; } }
动画的质感需要物理基础，有空深入研究。
另外，为了防止连续点击产生动画之后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{ 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>
对按钮按压效果这类简单动画的回调尤其有效。