アニメーション付きの円タスクでは、アニメーションで成長する円が表示されます。

ここで、円だけでなく、円の中にメッセージを表示する必要があるとします。円が完全に成長した後（アニメーションが完了した後）にメッセージが表示される必要があります。そうでない場合、見栄えが悪くなります。

タスクのソリューションでは、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!");
});

デモ

アニメーション付きの円タスクのソリューションをベースとして使用します。