JQuery/CSS3: анимация автоматического изменения высоты

Мне нужно анимировать высоту родительского контейнера всякий раз, когда он изменяется. Проблема заключается в том, что его высота установлена на авто, и, следовательно, высота зависит от содержимого. Конечной целью, которую я хочу достичь, является то, что всякий раз, когда высота изменяется из-за изменения содержимого, изменение может быть анимировано либо через jQuery, либо через CSS3.

Я искал аналогичную тему, но все, что я нашел, - это как оживить высоту от фиксированного значения до "auto": (

Ответ 1

Я думаю, что нашел обходное решение, которое работает относительно хорошо. Для его работы должно выполняться следующее требование: дочерний элемент находится в DOM (либо загружен документом, либо динамически), но скрыт.

Сначала мне нужно вычислить высоту родителя, поскольку она находится в ее конечном состоянии, то есть с уже показанным ребенком. Я впервые пришел к этому методу для вычисления высоты скрытого дочернего элемента , но этот метод имеет фундаментальный недостаток:, если ширина вашего ребенка в некоторых случаи больше, чем ваш родитель, содержимое в дочернем случае будет завернуто, когда оно будет помещено внутри родителя. Этот метод не будет точно вычислять высоту в этом случае, потому что абсолютно позиционированный элемент не имеет отношения к его родительской ширине.

Таким образом, единственный способ точно рассчитать высоту - фактически разместить ребенка внутри его родителя. Ниже приведен трюк:

$(".content").fadeIn(800);
var contentHeight = $(".content").outerHeight(true);
$(".parent").animate({"height", contentHeight}, 200);

Сначала я вызываю fadeIn на потомке, чтобы поместить его в поток DOM, и сразу после этого возьмите высоту дочернего элемента и любые другие вещи, чтобы вычислить правильную высоту, которой должен быть родитель, и анимировать родительскую высоту в более короткий период анимации, например .animate({height: myHeight}, 200).

В результате получается плавный анимированный контейнер с динамической высотой в зависимости от его дочернего содержимого.

Вот fiddle, так как вы можете видеть, что фиксированная высота не установлена нигде на странице, кроме начальной высоты родительского контейнера. Эта скрипта использует анимацию CSS3 и jQuery, но в большинстве случаев они взаимозаменяемы. Обратите внимание, что вам все равно нужен .outerHeight(true), чтобы получить общий размер содержимого, включая его поля, а установка overflow: hidden на родительском уровне предотвращает переполнение контента во время анимации в некоторых ситуациях.

Ответ 2

Вы можете получить эффект, который вы используете, только с помощью CSS. вместо анимации высоты div, анимируйте свойство max-height. установите max-height на зависание на то, что, по вашему мнению, будет max-height (будьте более внимательным). причина этого в том, что если вы установите max-height на 10000px, а высота div - 1000px, и вы установите продолжительность анимации на 1 секунду, она очистит высоту содержимого после 0,1 с и он появится, хотя переход закончился, поскольку max-height значения над 1000px не будут иметь никакого эффекта. Таким образом, более точный max-height лучше подходит для более последовательных анимаций.

http://jsfiddle.net/2QcCC/2/

.container {
    height: auto;
    min-height: 100px;
    max-height: 100px;
    transition: 1s max-height;
    overflow: hidden;
}
.container:hover {
    max-height: 4000px;   
}

Ответ 3

Один из способов сделать это - оживить высоту содержимого. Затем родительская высота будет автоматически следовать. Будет ли это работать для вас, зависит от того, как изменяется высота контента, но если контент является фиксированной высотой, тогда это должно быть возможно со следующим CSS:

.container {
    width: 500px;
    height: auto;
    border: 2px solid blue;
}

.container .content {
    with: 100%;
    height: 200px;
    transition: 1s height;
}

Когда вы изменяете высоту .content с помощью javascript, высота .container также будет анимирована.

Вы можете увидеть это в действии здесь: http://jsfiddle.net/MBD6z/

Я не уверен, что это будет работать в вашем случае... Мне нужно больше информации о том, как меняется контент, но это один из способов сделать это.