web html写个函数,移动端动画函数的封装_html/css_WEB-ITnose

最新推荐文章于 2023-02-25 11:40:29 发布

韶颜girl

最新推荐文章于 2023-02-25 11:40:29 发布

阅读量57

点赞数

文章标签： web html写个函数

再看看另外一种常见的如下图

上面对用的 js 代码 var nav=document.querySelector(".nav");var nava=nav.getElementsByTagName("li");var content=document.querySelector(".content");var ulcontent=document.getElementById("ulcontent");ulcontent.style.width=nav.offsetWidth*nava.length+'px';for(var i=0;ihtm结构

44444444444

基于zepto动画独立出来，语法类似zepto 动画 $("#some_element").animate( { opacity:0.25, left:'50px', color:'#abcdef', rotateZ:'45deg', translate3d:'0,10px,0' }, 500, 'ease-out'，function(){ alert('回调'); })

改写后独立与zepto的动画函数语法如下 transform(element,{ translate3d:'220px,10px,0',left:'1em',opacity:0.2,perspective:'400px', rotateY:'30deg'},duration,'linear',fn,delay);

关于兼容性：几乎与zepto一致，但是不支持动画帧 keyframe，个人觉得 keyframe移动端兼容性不是很好，尤其手机自带的浏览器(原生app 调用内嵌H5页面，小问题还是蛮多的)；

源码如下 //transform(obj,{translateX:'150px',left:'1em',opacity:0.2,perspective:'400px', rotateY:'40deg'},duration,'linear',fn,delay); ;(function(window,document,undefined){var prefix = function() { var div = document.createElement('div');//建立临时DIV容器 var cssText = '-webkit-transition:all .1s;-moz-transition:all .1s; -Khtml-transition:all .1s; -o-transition:all .1s; -ms-transition:all .1s; transition:all .1s;'; div.style.cssText = cssText; var style = div.style; var dom=''; if (style.webkitTransition) { dom ='webkit'; } if (style.MozTransition) { dom='moz'; } if (style.khtmlTransition) { dom='Khtml'; } if (style.oTransition) { dom='o'; } if (style.msTransition) { dom='ms'; } div=null; 去掉不必要的数据存储，便于垃圾回收 if(dom){style.transition 情况 return {dom: dom,lowercase: dom,css: '-' + dom + '-',js: dom[0].toUpperCase() + dom.substr(1) }; }else{ return false; }}();//alert(prefix.js);var transitionEnd=function () { var el = document.createElement('div'); var transEndEventNames = { WebkitTransition : 'webkitTransitionEnd', MozTransition : 'transitionend', OTransition : 'oTransitionEnd', msTransition : 'MSTransitionEnd', transition : 'transitionend' }; for (var name in transEndEventNames) { if (el.style[name] !== undefined) { return transEndEventNames[name] ; } } el=null; return false; }();//alert('支持'+transitionEnd);var supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i; //变形检测var dasherize=function (str) { return str.replace(/::/g, '/') //将：：替换成/ .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2') //在大小写字符之间插入_,大写在前，比如AAAbb,得到AA_Abb .replace(/([a-z\d])([A-Z])/g, '$1_$2') //在大小写字符之间插入_,小写或数字在前，比如bbbAaa,得到bbb_Aaa .replace(/_/g, '-') //将_替换成- .toLowerCase() //转成小写 }var transform=function (obj,properties, duration, ease, callback, delay){ if (!obj) return;//参数修正 if (typeof duration == 'function') callback = duration, ease = undefined, duration = 400,delay=delay if (typeof ease == 'function') //传参为function(properties,duration，callback) callback = ease, ease = undefined,delay=delay if (duration) duration = typeof duration == 'number' ? duration :400; delay = (typeof delay == 'number') ? delay :0; //参数修正var nowTransition=prefix.js+'Transition';var nowTransform=prefix.js+'Transform';var prefixcss=prefix.css;if(!prefix.js){nowTransition='transition'; nowTransform='transform';prefixcss=''; //-webkit-transition >> transition }var transitionProperty, transitionDuration, transitionTiming, transitionDelay;//过渡var key, cssValues = {}, cssProperties, transforms = ""; // transforms 变形 cssValues设置给DOM的样式var transform; //变形 var cssReset = {};var css='';var cssProperties = []; transform = prefixcss + 'transform'; //变形 cssValues[transform] cssReset[transitionProperty = prefixcss + 'transition-property'] = cssReset[transitionDuration = prefixcss + 'transition-duration'] = cssReset[transitionDelay = prefixcss + 'transition-delay'] = cssReset[transitionTiming = prefixcss + 'transition-timing-function']=''; // CSS transitions for (key in properties){ //如果设置的CSS属性是变形之类的 if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') ' else cssValues[key] = properties[key], cssProperties.push(dasherize(key)) } //for end if (transforms) cssValues[transform] = transforms, cssProperties.push(transform) if (duration > 0 && typeof properties === 'object') { cssValues[transitionProperty] = cssProperties.join(', ') cssValues[transitionDuration] = duration + 'ms' cssValues[transitionTiming] = (ease || 'linear') cssValues[transitionDelay] = delay + 'ms' } for(var attr in cssValues){ css += dasherize(attr) + ':' + cssValues[attr]+ ';' }obj.style.cssText=obj.style.cssText+css; if(!callback){return } //没有回调函数 return var fired = false;var handler = function () { callback && callback.apply(obj,arguments); fired=true; if(obj.removeEventListener) obj.removeEventListener(transitionEnd,arguments.callee,false) }; if(obj.addEventListener){ obj.addEventListener(transitionEnd, handler,false); } if(!transitionEnd||duration<=0){ //没有 @1 transitionEnd 事件或者@2 duration为0，即浏览器不支持动画的情况直接执行动画结束，执行回调。 setTimeout(function(){ handler(); });return; } setTimeout(function(){//绑定过事件还做延时处理，是transitionEnd在older Android phones不一定触发 if(fired) return handler()},(duration + delay) + 25); }//end window.transform=transform;})(window,document);

唯一的缺点 scrollTop 缓动不支持；这里有个简易的函数类似jquery 语法几乎一样

先看效果