带回调的动画圆圈
在任务 动画圆圈 中,展示了一个动画增长的圆圈。
现在假设我们不仅需要一个圆圈,还需要在圆圈内显示一条消息。消息应该在动画完成后(圆圈完全长大)出现,否则看起来会很丑。
在任务的解决方案中,函数 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!");
});
演示
以任务 动画圆形 的解决方案为基础。