Promiseとtransionが三角アニメを実現
995 ワード
友情のヒント:
s 6 Promiseの基本文法とtransionアニメを熟知しています.
コアコード便利コードの組織コードはより美しく、簡潔に見える. 地獄変を避ける
s 6 Promiseの基本文法とtransionアニメを熟知しています.
コアコード
// 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)
})
}