Как сделать плавное изменение высоты родительского блока при изменении высоты дочернего?

Здравствуйте
Подскажите пожалуйста
Код взял из примера акордеона, но родительский div разворачивается рывком.


Заранее благодарю.
  • Вопрос задан
  • 1156 просмотров
Решения вопроса 1
@ha100790tag
предлагаю вам рассмотреть следующий пример, надеюсь натолкнет на какие то мысли. Во всяком случае прошу поправить 2 момента: 1) во имя всех богов семантики умоляю вас не строить аккордеон на чекбоксах, 2) не используйте transition all.

в данный момент все происходит резко тк когда вы убираете max-height: 0; вы не задаете новое максимальное значение и браузер попросту присваивает значение max-height: none;. Значение none не является числовым и выполнить какие то математические операции с ним для плавной анимации браузеру не представляется возможным - как результат рывки. Во избежание этого, если у вас есть какоето понимание, что блок никогда не будет больше определенной высоты - установите ее в цсс, если же высота блоков абсолютно вариативна - лучше использовать JS анимации, Jquery предлагает ряд неплохих встроенных вариантов. Если не используется Jquery - всегда можно реализовать это нативно, но это уже совсем другая история...

Надеюсь данный ответ был вам полезен, хорошего дня.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ovodovod
I am Software Engineer
На CodePen есть пример реализации аккордеона на чистом CSS с плавными переходами, посмотрите, скорее всего вам поможет.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы