首页 > 代码库 > 延时动画四部曲

延时动画四部曲

2024-10-23 03:57:02   210人阅读

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

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

延时动画四部曲


联系
我们