Как анимировать height?

Question

[wiyod]

Не могу понять как анимировать аккордеон нормально используя height.

.acc_panel {
  background: #F2F2F2;
  height: 0;
  overflow: hidden;
  transition: all 300ms;
}

.acc_panel.active {
  height: auto;
  transition: all 300ms;
}

Ни auto, ни 100% не анимируется.
Как сделать? https://codepen.io/kodej/pen/PONeme
Если не height, как красиво анимировать аккордеон?

Знаю есть уродливый хак с большим max-height, но это не нормально.

Comments

[Ankhena]

А hide и show вам не подходят? Обычно ими анимируют аккордионы.
И анимация у вас там есть.

[wiyod]

Ankhena, как вы предлагаете анимировать hide и show, лол

[Ankhena]

wiyod, ах, ну да, здрасте

Появление и иcчезновение элементов
.show() .hide()
С помощью этих функций можно плавно показывать и скрывать выбранные элементы на странице, за счет изменения размера и прозрачности. Отметим, что после скрытия элемента, его css-свойство display становится равным none, а перед появлением, оно получает свое прежнее значение обратно.

а также

.slideToggle()
Вызов этого метода приводит к плавному сворачиванию (если элемент развернут) или разворачиванию (если элемент свернут) выбранных элементов на странице. Отметим, что после скрытия элемента, его css-свойство display становится равным none, а перед появлением, оно получает свое прежнее значение обратно.

[Ankhena]

wiyod, поменяйте на transition: all 3s; и увидите, что анимация работает. Правда, в одну сторону.

Почему она не работает в другую, разбирайтесь сами. Потому что старательно хамите людям, которые собирались вам помогать. Если вам не подходят мои идеи - не используйте их, обзываться и пытаться меня обидеть не стоит.

[MaxLich]

"как анимировать hate?")))) (Извините, не сдержался :-) )

Answer 1

[Gortyser]

В данном случае проблема в том, что именно height: auto анимироваться не будет. Поэтому с css такое сделать не выйдет, придётся подключать js.
Конкретной реализации не скажу, идея заключается в считывании scrollHeight нужного элемента.

Comments

[wiyod]

Судя по всему да, без вариантов. Нашел этот вопрос на стековерфлоу. Решения CSS нет!

Answer 2

[Андрей]

лучше скриптом scrollDown и scrollUp
ссылка

Comments

[wiyod]

Где в вопросе хоть слово о джеквери?

[Андрей]

transition: height 300ms; пробуй тогда, но нужно в пикселях указывать иначе не сработает

Answer 3

[Саша]

Реализация аккордеонов только на JS прошлый век, попробуйте написать с использованием css transition, а JS только для добавления/снятия высоты и классов.
Для оптимизации самое то!

Comments

[wiyod]

Ну-ну, вперед, покажите как надо)))

[HelpSophie]

wiyod, что ж вам не погуглить-то "css аккордеон"
dbmast.ru/otzyvchivyj-akkordeon-na-chistom-css

[wiyod]

HelpSophie, вопрос читай внимательно, гуглер