码迷,mamicode.com
首页 > 其他好文 > 详细

延时动画四部曲

时间:2015-01-04 16:54:52      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:

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

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

延时动画四部曲

标签:

原文地址:http://www.cnblogs.com/haimingpro/p/4201406.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!