Как плавно развернуть div?

Есть div который изначально скрыт, но при клике на кнопку плавно разворачивается.
Способ с display: none, а потом display: block не подходит так как не плавный.
Способ с opacity: 0 , а потом opacity: 1 тоже не подходит так как нужно чтобы элемент убирался из потока.
Способ с max-height: 0, а потом max-height: *какое-то число* тоже не подходит так как со временем в div будут добавляться новые элементы и высота будет изменяться.

Как это сделать? Желательно решение на JavaScript.
  • Вопрос задан
  • 1081 просмотр
Решения вопроса 3
sniggering_deus
@sniggering_deus Куратор тега CSS
Dance Gavin Dance - Prisoner
Способ с opacity:0 , а потом opacity:1 тоже не подходит так как нужно чтобы элемент убирался из потока


Всё верно. Но можно совместить display: none и opacity: 0 для скрытия элемента, а для появления использовать display: block и opacity: 1. Это можно сделать например с помощью @keyframes.

Например простой код для появления блока:

.element {
  display: none;
  animation: fadein 0.8s;
}

.active {
 display: block;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


А для скрытия использовать всё это в обратном порядке.

Есть кстати и другие варианты, например совмещать display: none/block со свойством transform и всё это дело анимировать. Например есть библиотека для анимаций animate.css. С помощью этой библиотеки можно создать более интересные эффекты скрытия и появления элементов комбинируя в некоторых случаях трансформации и манипуляции с display: none/block.

Способ с max-height: 0, а потом max-height: *какое-то число* тоже не подходит так как со временем в div будут добавляться новые элементы и высота будет изменяться.


Если проблема в том что придётся каждый раз высчитывать высоту элемента и менять значение в коде - это не проблема. Можно сделать как-то так с помощью JS:

Ответ написан
Способ с max-height: 0, а потом max-height: *какое-то число* тоже не подходит так как со временем в div будут добавляться новые элементы и высота будет изменяться.


Можно обернуть контент блока, у этой обёртки мы будем брать clientHeight и присваивать это значение в max-height родителя

Вот, можно посмотреть здесь, возможно код не очень хороший, но суть уловить можно
https://codepen.io/Kirill9011/pen/BajEwBJ?editors=0010
Ответ написан
Spartak-2205
@Spartak-2205
Разработка и создание сайтов
Если в проекте используется jquery, то через .slideToggle() или аналог jQuery slideToggle на чистом Javascript
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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