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)
        })
    }

链式调用的优势

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