requestAnimationFrame

基本用法

//获取到一个元素
var dom = document.getElementsByClassName('box')[0];
//给元素添加点击事件（目标是点击后向右移动）
dom.addEventListener('click', click);

function click() {
    var startTime = null;//动画开始时间
    var setTime = 1000;//我要设置的动画结束时间
    //动画过程方法（参数里的时间戳是浏览器自动返回的，是页面加载到现在过去的时间戳）
    function lxf(timeStamp) {
        if (!startTime) startTime = timeStamp;//如果还没有开始时间就设置位当前时间戳
        var processTime = timeStamp - startTime;//获取已经过了多久（超出1就取1）
        var percent = Math.min(processTime / setTime, 1);//获取当前已经过了总时间的百分之多少
        dom.style.marginLeft = percent * 200 + 'px';//设置元素左边距，距离是百分比乘总共的，就是当前应该移动多远
        
        //如果没到时间就继续移动
        if (processTime < setTime) {
            requestAnimationFrame(lxf);
        }
    }
    //开始移动
    requestAnimationFrame(lxf); // 开始动画
}