首页 HTML5正文

CSS3运动框架--定义自己想要的动画

景先 HTML5 2015-07-10 994 0 keyframescss3运动

今天给大家整理一个CSS3的运动框架,废话不多说。请看源码:

function move(obj,json,options){
        options=options || {};
        options.time=options.time || 700;
        options.type=options.type || 'ease';
        
        obj.style.transition=options.time+'ms all '+options.type;
        
        for(var name in json){
            var iTarget=json[name];
            obj.style[name]=iTarget;    
        }
        
        function tEnd(){
            obj.removeEventListener('webkitTransitionEnd',tEnd,false);
            options.end && options.end.call(obj);    
        }
        obj.addEventListener('webkitTransitionEnd',tEnd,false);
    }

用法:

var oDiv=document.getElementById('div1');
    
    oDiv.onclick=function(){
        move(this,{width:'300px', height:'300px'},{time:3000,end:function(){
            move(this,{left:'300px'})    
        }});
    };


版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论