返回課程

帶有回調的動畫圓圈

動畫圓圈 任務中,顯示了一個動畫成長的圓圈。

現在,假設我們不只要一個圓圈,還要在裡面顯示訊息。訊息應該在動畫完成之後出現(圓圈完全長成),否則看起來會很醜。

在任務的解決方案中,函式 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!");
});

示範

動畫圓形 任務的解決方案為基礎。