帶有回調的動畫圓圈
在 動畫圓圈 任務中,顯示了一個動畫成長的圓圈。
現在,假設我們不只要一個圓圈,還要在裡面顯示訊息。訊息應該在動畫完成之後出現(圓圈完全長成),否則看起來會很醜。
在任務的解決方案中,函式 showCircle(cx, cy, radius)
會繪製圓圈,但沒有提供追蹤何時準備就緒的方法。
新增一個回調引數:showCircle(cx, cy, radius, callback)
,在動畫完成時呼叫。callback
應該接收圓圈 <div>
作為引數。
以下是範例
showCircle(150, 150, 100, div => {
div.classList.add('message-ball');
div.append("Hello, world!");
});
示範
以 動畫圓形 任務的解決方案為基礎。