Коло анімоване за допомогою функції.
У завданні Анімований круг показана анімація зростання кола.
Припустимо, що нам потрібно показати повідомлення всередині нього. Повідомлення має з’явитися після завершення анімації (коли коло повністю виросло), інакше це виглядатиме погано.
У вирішенні завдання функція showCircle(cx, cy, radius)
малює коло, але не дає можливості відстежити, коли воно готове.
Додайте аргументом функцію зворотного виклику: showCircle(cx, cy, radius, callback)
, яка буде викликатися після завершення анімації. Вона має отримувати коло <div>
як аргумент.
Ось приклад:
showCircle(150, 150, 100, div => {
div.classList.add('message-ball');
div.append("Hello, world!");
});
Демо:
За основу візьмемо рішення задачі Анімований круг