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

鏈式調用的優點

• 方便代碼的組織 代碼看起來更加美觀簡潔
• 避免回調地獄