运动函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color: gainsboro;
            position:relative;
            top:200px;
            opacity:0.8
        }
    </style>
    <script>
        window.onload=function(){
            var div=document.querySelector('div')
            div.addEventListener('click',function(){
                animation(this,{'left':233,'top':559,opacity:0.2},end);
                function end(){
                    this.style.backgroundColor='blue';
                }
            })

            function animation(elem,obj,fn=()=>{}){
                fn=fn.bind(elem)
                let count=0;
                for(let attr in obj){
                    if(attr === 'opacity') obj[attr]*=100
                    count++
                    let timer=setInterval(function(){
                        let current= attr==='opacity' ? getComputedStyle(elem)[attr]*100 : parseInt(getComputedStyle(elem)[attr])
                        let step=(obj[attr]-current)/10
                        step=step>0 ? Math.ceil(step) : Math.floor(step)
                        if(current === obj[attr]){
                            clearInterval(timer)
                            count--
                            if(!count){
                                fn()
                            }
                        }else{
                            elem.style[attr]=attr==='opacity' ? (current+step)/100 : current+step+'px'
                        }

                    },30)
                }
            }


        }
    </script>
</head>
<body>
    <div></div>
    <span></span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:100px;
            height:100px;
            background-color: fuchsia;
            position:absolute;
            left:500px;
            top:600px;
            /* display:none; */
        }
        span{
            width:100px;
            height:100px;
            background-color: rgb(236, 9, 9);
            display:block;
            position:absolute;
            left:0;
            top:140px;
        }
    </style>
</head>
<body>
    <div></div>
    <!-- <span></span> -->
    <script>
        var div=document.querySelector('div')
        // var span=document.getElementsByTagName('span')[0]


        function move(elem,attr,target){
            let step=0;
            let timer=setInterval(function(){
                step+=20;
                elem.style[attr]=step+'px';
                if(step>=target) clearTimeout(timer);
            },30)
        }
        
        div.addEventListener('mousedown',function(){
            animation(div,{opacity:0.2,left:200,top:111})
            // animation(div,{opacity:0.2})
        })
        function animation(elem,obj){
            for(let key in obj){
                console.log(key);
                let step=parseInt(getComputedStyle(elem)[key]);
                let increment=(obj[key]-step)/10;
                if(key === 'opacity'){
                    let timer=setInterval(function(){
                        console.log(step,increment)
                        step+=increment;
                        elem.style[key]=step;
                        if(Math.abs(step-obj[key])<0.001) clearInterval(timer);
                    })

                }else{
                    let timer=setInterval(function(){
                        // step+=50;
                        step+=increment;
                        elem.style[key]=step+'px';
                        if(Math.abs(step-obj[key])<2) clearTimeout(timer);
                    },30)
                }
            }
        }
    </script>
</body>
</html>