回到课程
本资料仅提供以下语言版本:عربي, English, Español, Indonesia, Italiano, 日本語, Русский, Українська。请 帮助我们 将其翻译为 简体中文 版本。

带回调的圆圈动画

In the task 圆圈动画 an animated growing circle is shown.

Now let’s say we need not just a circle, but to show a message inside it. The message should appear after the animation is complete (the circle is fully grown), otherwise it would look ugly.

In the solution of the task, the function showCircle(cx, cy, radius) draws the circle, but gives no way to track when it’s ready.

Add a callback argument: showCircle(cx, cy, radius, callback) to be called when the animation is complete. The callback should receive the circle <div> as an argument.

Here’s the example:

showCircle(150, 150, 100, div => {
  div.classList.add('message-ball');
  div.append("Hello, world!");
});

Demo:

Take the solution of the task 圆圈动画 as the base.