Выбор ответа Middle Анимации обновлено
Сколько раз сработает transitionend
Вопрос
У элемента меняются opacity и transform, оба переходят за 200 мс. Сколько раз сработает событие transitionend на элементе?
.panel { transition: opacity 200ms, transform 200ms; }
.panel.open { opacity: 1; transform: none; }
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Два раза: по одному на каждое свойство. transitionend приходит отдельно на каждое завершённое свойство, у события есть поле propertyName.
Варианты ответа
- Один раз, когда закончатся все переходы
- Ни разу: событие есть только у
animation - Два раза: по одному на каждое свойствоправильный ответ
- Зависит от браузера, поведение не стандартизовано
Разбор
transitionend приходит отдельно на каждое завершённое свойство, у события есть поле propertyName. Поэтому обработчик часто фильтрует по нему. У animation свои события: animationstart, animationiteration, animationend. Поведение описано в спецификации CSS Transitions и одинаково в основных браузерах.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.