带回调的圆圈动画
在练习 圆圈动画 中展示了一个不断变大的圆。
现在假设我们不止需要一个圆,还需要在其中显示一条消息。该消息应该出现在动画结束 之后(圆变最大时),否则看起来会很丑。
在该练习的解决方案中,函数 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!"
)
;
}
)
;
Demo:
以 圆圈动画 的解决方案为基础。