ES6 Promise动画

最新推荐文章于 2024-07-12 09:36:48 发布

Jason–json

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量258

点赞数

文章标签： javascript css html5 es6

本文链接：https://blog.csdn.net/weixin_46146313/article/details/104345532

版权

用Prinuse动画相比比回调地狱，代码可读性更好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 300px;
            background-color: rebeccapurple;
            position: absolute;
        }
    </style>
</head>
<body>
        <div class="box"></div>
    <script>
    
        // el 元素
        // attr 样式
        // val 目标样式的具体指
        //cd 当前动画结束后，要做的事情
        function move(el,attr,val){
            //当前值            
            let now = parseFloat(getComputedStyle(el)[attr]);

            //方向/速度  abs 取绝对值 最后得出结果 -1 或 1表示方向
            let speed = (val - now) / Math.abs(val - now) *2;

            return new Promise((resolve)=>{ // 新建一个对象
                clearInterval(el.timer);
            el.timer = setInterval(()=>{    //el 元素 元素上挂载定时器
                
                if(Math.abs(now - val) <= 0){
                    clearInterval(el.timer);
                    resolve();
                    // cb && cb();                   //就是做一个判断 当前动画结束之后要做的动作
                }else{
                    now += speed;                 //获取当前值 + 方向/速度
                    // console.log(now)
                    el.style[attr] = now + "px";  //给元素赋值赋值                  
                }
            },20)

            })  //return
        }
    {    
            let box = document.querySelector(".box");
        function boxMove(){
            //使用Promise 完成回调
            move(box,"left",200).then(()=>{
                return move(box,"top",200)    //这行prm对象的状态就是上一个对象的状态，第三种情况
            }).then(()=>{
                return move(box,"left",0)
            }).then(()=>{
                return move(box,"top",0)
            }).then(()=>{
                boxMove();
            })
            
        }
        boxMove();
    }
    </script>
</body>
</html>

Jason–json

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ES6 Promise动画

用Prinuse动画相比比回调地狱，代码可读性更好<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫