CSS - Высота элемента анимации до авто

Это кажется глупым вопросом, но я был у него часами, и я не могу заставить эту простую работу работать.CSS - Высота элемента анимации до авто

У меня есть элемент высоты 0px.

HTML

<div class="element"> ...content... </div>

CSS

.element { 
    height: 0px; 
    overflow: hidden; 
    transition: height 2s; 
}

Тогда у меня есть некоторые JS, который проверяет, когда кнопка нажата, и добавляет класс 'одушевленные' к элементу.

CSS

.animate { 
    height: auto; 
}

Проблема не в том, нет 2 второй анимации вообще, как указано в CSS.

Я тестировал то же самое, но вместо анимации до height: auto;, я анимировал его до height: 150px;.

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

Вот является JSFiddle я создал: https://jsfiddle.net/0ctzc4hv/1/

Как бы я идти о анимировать высоту элемента на авто?

Спасибо заранее,

Дэвид

источник

2016-10-31 David Callanan

Вы не можете анимировать 'auto', но вы можете использовать' max-height', где вы устанавливаете его на значение, достаточно большое, чтобы покрывать самое высокое содержимое. – LGSon

Как ... https://jsfiddle.net/0ctzc4hv/2/ – DaniP

@LGSon @DaniP Спасибо! Что, если максимальная высота неограничена? Должен ли я просто вставить «100000» или что-то еще? –

Авто свойство не анимируемое, вы можете обойти это, анимировать свойство макс высоты.

источник

2016-10-31 17:19:13 Bazinga

Почему вы не скрывают, а затем использовать JQuery, чтобы достичь того, чего вы хотите:

Скрыть элемент: функция

Display: none;

JQuery:

$('you_element').slideDown();

источник

2016-10-31 17:23:19

Я бы хотел использовать чистое решение css для этой проблемы. Кроме того, если мне действительно нужно было использовать javascript, я не смогу использовать jQuery для проекта, над которым я работаю. –

CSS - Высота элемента анимации до авто

ответ

Смежные вопросы