移动端 动画函数 的 封装_html/css_WEB-ITnose
程序员文章站
2022-04-07 16:17:16
...
移动端 单页有时候 制作只用到简单的css3动画即可,我们简单封装一下,没必要引入zepto框架。
上面图片对应的 js
var leftsbox=document.getElementById("leftsbox"); var boxdiv=leftsbox.getElementsByTagName("div"); leftsbox.onclick=function(){ for(var i=0;i再看看另外一种 常见的 如下图
上面对用的 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唯一的缺点 scrollTop 缓动不支持; 这里有个简易的 函数 类似jquery 语法几乎一样
先看效果
相关布局
111111111111111111111111111111111122222222222222222222222222222333333333333333333333334444444444444444444最后一个tops
上图相关js
document.getElementById("gpTop").onclick=function(e){ var that=this; startMove(that,{"scrollTop":0},function(){ that.innerHTML='到顶了'; }); //width: 206px; height: 101px; opacity: 0.3; } var inner=document.getElementById("inner"); var inlione=inner.getElementsByTagName("li"); var box=document.querySelectorAll(".boxs"); for(var i=0;i如果通过原生js 获取 jquey的offset().top 的值呢 如下 这里
var getOffest=function (obj){var top=0,left=0;if(obj){ while(obj.offsetParent){ top += obj.offsetTop; left += obj.offsetLeft; obj = obj.offsetParent; } } return{ top : top, left : left }}startMove基于 requestAnimationFrame 兼容ie8+
语法如下
startMove(element,{"left":1300,"opacity":90},2000,'easeOut',function sa(){ console.log('回调函数'); }); // width: 201px; height: 135px; opacity: 0.8; 只有宽是对的 其他未达到目标;(function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x
推荐阅读
-
JS---动画函数封装:设置任意的一个元素,移动到指定的目标位置
-
js封装简单的动画函数【左右上下移动】
-
移动端自适应布局的高效方法,欢迎批评或指正_html/css_WEB-ITnose
-
移动端开发,几个你可能不知道的CSS单位属性。_html/css_WEB-ITnose
-
求移动端一个这样的表格该怎样做_html/css_WEB-ITnose
-
屏蔽移动端浏览器的长按事件_html/css_WEB-ITnose
-
清除移动端网站点击a标签时闪现的边框或遮罩层(CSS)_html/css_WEB-ITnose
-
div+css3实现漂亮的多动画彩标签云,鼠标移动会有动画_html/css_WEB-ITnose
-
屏蔽移动端浏览器的长按事件_html/css_WEB-ITnose
-
div+css3实现漂亮的多动画彩标签云,鼠标移动会有动画_html/css_WEB-ITnose