Promise与transition实现三角动画

友情提示：

熟悉es6Promise的基本语法及transition动画

---

核心代码

// promise封装
    let count = null;
    // transitionend  监听transition动画执行结束
    // box元素绑定transitionend事件
    box.addEventListener('transitionend',()=>{
        count();
    })
    // 盒子运动封装
    let move=(x,y)=>{
        return new Promise((reslove,reject)=>{
            box.style.transform =`translate(${x}px,${y}px)`;
            count = reslove;
        })
    }
    // run函数触发
    let run=()=>{
        // move(200,0).then(()=>{
        //     move(200,200).then(()=>{
        //         move(0,0).then(()=>{
        //             move(0,200)
        //         })
        //     })
        // })
        // Promise 链式调用
        move(200,0).then(()=>{
            return move(200,200)
        }).then(()=>{
            return move(0,0)
        }).then(()=>{
            return move(0,200)
        })
    }

链式调用的优点

• 方便代码的组织 代码看起来更加美观简洁
• 避免回调地狱