移动端常见问题动画演示

移动端动画

红色勾勾代表强烈推荐

transition实现动画案例：

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>移动端动画</name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"style>
        *{padding:0;margin}
        .boxwidth100pxheight 100pxbackground-color pinktransitiontransform 1s}
    bodybutton id="btn">startbuttondiv class="box" id="box"></div>

    script>
        var btn=document.getElementById("btn),boxboxwindow.innerWidth-100//移动的距离

            btn.addEventListener(click,function(){
                box.style.transformtranslate3d(+destpx,0);
            },1)">false);    
    html>

也可以提取成函数的写法：

(){
                move(box,dest);
            },1)">);    

             move(el,pos){
                el.style.transformpos;
            }
    >

animation动画推荐一个animation库，animation.js https://daneden.github.io/animate.css/

可以查看各种动画的样式：

一般情况下推荐使用css3的transition和animation来完成动画，如果不能满足需求，可以考虑js的requestAnimationFrame

不做css动画时，记得一定要去掉transition属性

requestAnimationFrame的特点是：调用一次只执行一帧；如果想要持续执行，就需要递归。

requestAnimationFrame的兼容性处理    
         requestAnimationFramewindow.requestAnimationFrame||
        window.webkitRequestAnimationFrame
        window.mozRequestAnimationFrame
        window.msRequestAnimationFrame
        window.oRequestAnimationFrame||
        (fn){
            setTimeout(fn,1)">16);
        }

                    speed1;

        btn.addEventListener((){
            requestAnimationFrame(step);
        },1)">);    

        ;
        }

         step(){
            if(pos<dest){
                递归
                pos+=speed;
                move(box,pos);
                requestAnimationFrame(step);
            }else{
                posdest;
                move(box,pos);
            }
        }
    >

移动端常见问题动画演示

相关文章