Neon-animation — полимерная библиотека для анимации веб-компонентов. Нет ничего лучше, чем волнение от первого использования. Естественно, вы начинаете с создания чего-то очень простого и называете это своим «ребенком».
Как это ломается?
Давайте представим, что ваш «ребенок» — это диалоговое окно, которое переключается каждый раз, когда вы нажимаете кнопку. Вскоре вы обнаружите, что если вы нажмете эту кнопку слишком быстро, ваш «ребенок» сломается — если это будет, например, масштабируемая анимация, он больше не будет анимироваться.
Эта «полимерная ошибка» возникает, когда накапливается несколько анимаций. Другими словами, если вы запускаете анимацию для того же элемента до того, как завершится предыдущий, вы получите ошибку.
За примером далеко ходить не надо — такое поведение демонстрирует базовый набор демо в каталоге полимеров неоновых анимаций (идем дальше, переходим по ссылке, выбираем базовый и быстро нажимаем кнопка переключения кружка).
Только одна анимация за раз
Чтобы решить эту проблему, нам нужно предотвратить «нагромождение» анимаций. Рассмотрите возможность отмены всех анимаций перед воспроизведением следующей. Это гарантирует, что никакие анимации не воспроизводятся одновременно, и, следовательно, устраняет проблему.
// Cancel running animations
this.cancelAnimation();
// Plays new animation
this.playAnimation('my-baby', '...');
Фото: Дэвид Кучке
