变速动画函数封装增加任意多个属性透明度和层级

Posted 2021-01-24 lujieting0

//计算后的样式属性---- 一个元素的任意的一个样式属性值
function getStyle(element,attr) {
    //判断这个浏览器是否支持这个方法
    return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
//匀速动画
function animate(element,json,fn) {  //element--元素   attr--属性名字   target--目标位置
    //清理定时器
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
        var flag=true;//默认，假设，全部到达目标
        for(var attr in json){
            //判断这个属性中attr中是不是opacity
            if (attr=="opacity"){
                //获取元素的当前的透明度，当前的透明度放大100倍
                var current=getStyle(element,attr)*100;
                //目标的透明度放大100倍
                var target=json[attr]*100;
                var step=(target-current)/10;
                step=step>0?Math.ceil(step):Math.floor(step);
                current+=step;
                element.style[attr]=current/100;
            }else if(attr=="zIndex"){   //判断这个属性attr中是不是zIndex
                //层级改变就是直接改变这个属性的值
                element.style[attr]=json[attr];
            }else {
                //获取元素当前位置
                var current=parseInt(getStyle(element,attr));//数字类型
                //当前的属性对应的目标值
                var target=json[attr];
                //移动的步数
                var step=(target-current)/10;
                step=step>0?Math.ceil(step):Math.floor(step);
                current+=step;
                element.style[attr]=current+"px";
            }
            //判断是否到达目标
            if(current!=target){
                flag=false;
            }
        }
        if(flag){
            //清理计时器
            clearInterval(element.timeId);
            //回调函数,所有属性达到目标后才能使用
            if(fn){
                fn();
            }
        }