变速动画函数封装增加任意多个属性和回调函数及层级和透明度_多封装一层函数会增加多少耗时-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41829477/article/details/81224470

本文介绍了一个使用纯CSS实现元素动画效果的方法，通过自定义函数获取元素属性值，并逐步调整到目标值来完成平滑过渡。支持宽度、高度、位置及透明度等属性的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取任意一个元素的任意一个属性的当前的值---当前属性的位置值

function getStyle(element, attr) {
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr]
            : element.currentStyle[attr] || 0;
    }

function animate(element,json,fn){
    clearInterval(element.timeId);
    element.setInterval(function(){
        var flag=true;
        for (var attr in json){
            if (attr=="opacity"){
                var current=getStyle(element,attr)*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"){
                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();
                }
            }
},20);
}

测试代码

my$("btn1").onclick = function () {
        var json1 = {"width": 400, "height": 500, "top": 80, "left": 500, "opacity": 0.2};
        animate(my$("dv"), json1, function () {
            var json2 = {"width": 500, "height": 500, "top": 0, "left": 0, "opacity": 0.8, "zIndex": 1000};
            animate(my$("dv"), json2);
        });
    };