Анимация раскрытия до height: auto
Вопрос
Аккордеон раскрывается сменой height: 0 на height: auto с transition: height 300ms. Что произойдёт и как сделать плавно во всех основных браузерах?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Варианты ответа
- Всё сработает плавно: браузер сам посчитает конечную высоту
- Анимация пойдёт плавно, но только если добавить контейнеру
will-change: height - Высота прыгнет скачком; плавно можно через
grid-template-rowsот0frк1frправильный ответ - Высота прыгнет скачком; исправить можно только через JavaScript и
setInterval
Разбор
Ключевое слово auto не интерполируется классическим transition, поэтому высота прыгает. Треки грида в fr интерполируются, и приём с grid-template-rows: 0fr → 1fr (внутри элемент с overflow: hidden) работает во всех современных браузерах. will-change не делает свойство анимируемым. JavaScript тоже вариант (измерить scrollHeight), но не единственный, и для покадровой работы берут requestAnimationFrame, а не setInterval.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Предыдущий вопрос
Почему элемент возвращается после анимации
Следующий вопрос
requestAnimationFrame против setInterval