Вставная CSS3 анимация с высотой: авто

Question

Я хочу, чтобы мой блочный элемент выглядел так, как если бы высота росла до своего максимума (как прогрессивное шоу JQuery ), вертикально «плавно» толкая любой элемент после него по мере его роста.1004 * Это просто с фиксированным height (сделать max-height переходом от 0 до требуемого размера), но не с height: auto, поскольку вы не можете заставить max-height перейти с 0 на none (элемент будет0px в высоту, а затем внезапно появляются на 100% анимации).

Я пробовал варьировать transform от scaley(0) до scaley(1), но высота автоматически «резервируется» с началапереход (таким образом, содержимое после вставленного элемента жестоко смещается вниз вместо плавного, постепенного нажатия).

Answer 1

Вы можете использовать элемент «толкатель» (или псевдоэлемент) перед любым контентом.

<div class="container open">
    <div class="pusher"></div>
    ... the rest of the unknown height content
</div>

Затем измените поле толкателя.

.container { overflow:hidden }
.pusher { margin-top:-100%; transition:margin-top .5s ease; }
.open .pusher { margin-top:0%; }

Answer 2

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

Answer 3

Другой метод используется Отзывчивым Nav , он использует JavaScript для вычисления высоты цели, а затем создает переход max-height от 0 до полученного значения.

Код здесь .

Answer 4

Похоже, что лучшим решением для эмуляции height: auto; может быть вместо этого анимация max-height.Я обновил скрипку DuMaurier, и она, кажется, работает: http://jsfiddle.net/8JLKA/1/

Я начал с max-height, установленным по умолчанию, а затем перевел его на :hover на что-то намного большее, чем когда-либо понадобилось для коробки.500px.Это мой первый раз, когда я возился с переходами CSS, поэтому я могу упустить что-то решающее.

Обновление: Хорошо, я собираюсь оставить это, но это в основном плохая идея .Проблема в том, что время перехода связано с полным значением max-height, и поэтому, если фактическая высота содержимого не очень близка к значению max-height, анимация будет появляться слишком быстро.Как ни странно, при уходе от максимума max-height переход занимает ожидаемое время.Не уверен, почему это так.Кроме того, смягчение также не будет отображаться правильно.

Answer 5

Майкл прав, любая вещь, которая применяет значение 'auto', не будет анимировать чисто.Вы должны установить определенную высоту.Я внес некоторые изменения в jsfiddle Duopixel здесь: http://jsfiddle.net/joshvogt/vjXuH/

Если вы хотите, чтобы высота была идеальной для каждого элемента, вам придется применять классы к каждому элементу и указывать высоту для каждого.Ссылка устанавливает высоту для самого большого элемента.