最强大脑贾立平作弊,自从献宝朝河宗,藤黄茶
移动端动画
红色勾勾代表强烈推荐
transition实现动画案例:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>移动端动画</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> *{padding:0;margin:0;} .box{width:100px;height: 100px;background-color: pink;transition:transform 1s;} </style> </head> <body> <button id="btn">start</button> <div class="box" id="box"></div> <script> var btn=document.getelementbyid("btn"), box=document.getelementbyid("box"), dest=window.innerwidth-100;//移动的距离 btn.addeventlistener("click",function(){ box.style.transform="translate3d("+dest+"px,0,0)"; },false); </script> </body> </html>
也可以提取成函数的写法:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>移动端动画</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> *{padding:0;margin:0;} .box{width:100px;height: 100px;background-color: pink;transition:transform 1s;} </style> </head> <body> <button id="btn">start</button> <div class="box" id="box"></div> <script> var btn=document.getelementbyid("btn"), box=document.getelementbyid("box"), dest=window.innerwidth-100;//移动的距离 btn.addeventlistener("click",function(){ move(box,dest); },false); function move(el,pos){ el.style.transform="translate3d("+pos+"px,0,0)"; } </script> </body> </html>
animation动画推荐一个animation库,animation.js
可以查看各种动画的样式:
一般情况下推荐使用css3的transition和animation来完成动画,如果不能满足需求,可以考虑js的requestanimationframe
不做css动画时,记得一定要去掉transition属性
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>移动端动画</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> *{padding:0;margin:0;} .box{width:100px;height: 100px;background-color: pink;} </style> </head> <body> <button id="btn">start</button> <div class="box" id="box"></div> <script> //requestanimationframe的兼容性处理 var requestanimationframe=window.requestanimationframe|| window.webkitrequestanimationframe|| window.mozrequestanimationframe|| window.msrequestanimationframe|| window.orequestanimationframe|| function(fn){ settimeout(fn,16); } var btn=document.getelementbyid("btn"), box=document.getelementbyid("box"), dest=window.innerwidth-100,//移动的距离 speed=1, pos=0; btn.addeventlistener("click",function(){ requestanimationframe(step); },false); function move(el,pos){ el.style.transform="translate3d("+pos+"px,0,0)"; } function step(){ if(pos<dest){ //递归 pos+=speed; move(box,pos); requestanimationframe(step); }else{ pos=dest; move(box,pos); } } </script> </body> </html>
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
[书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
网友评论