Как анимировать элемент html с высотой: 0 пикселей до высоты: авто (CSS)

Я пытаюсь создать анимацию, наведя указатель мыши на мой div, я хочу, чтобы height увеличилось до height, которое должно быть для полного отображения его содержимого. эффект должен быть от height(height:0px), который начинается с нуля, до total height(height:auto) содержания

это мой код:

div{
	height: 0px;
	transition: all 0.5s ease;
	overflow: hidden;
	border:1px solid red;
}

div:hover{
	height:auto;
}

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat sunt tempora, cupiditate quia labore nam quas consequuntur ducimus nemo tempore dolorem beatae voluptatem unde excepturi, error eius commodi laudantium quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo nisi, eos impedit voluptate, molestiae repudiandae ullam deserunt magnam sed aliquam eveniet id illo qui nemo vero quis officiis, veritatis.
</div>

https://jsfiddle.net/df973ktr/

Для исправления для Chrome и Safari попробуйте анимировать height: fit-content;

— 20.03.2019 18:56

Вы можете использовать анимацию и перезапустить ее с помощью js.

— 20.03.2019 19:24

css

20.03.2019 18:46

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

div {
  max-height: 0px;
  transition: all 0.5s ease;
  overflow: hidden;
  border: 1px solid red;
}

div:hover {
  max-height: 900px;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat sunt tempora, cupiditate quia labore nam quas consequuntur ducimus nemo tempore dolorem beatae voluptatem unde excepturi, error eius commodi laudantium quisquam?Lorem ipsum dolor sit amet,
  consectetur adipisicing elit. Doloremque quo nisi, eos impedit voluptate, molestiae repudiandae ullam deserunt magnam sed aliquam eveniet id illo qui nemo vero quis officiis, veritatis.
</div>

Как я могу динамически получить максимальную высоту?

— 20.03.2019 19:00

или я должен указать значение, от которого я уверен, что никогда не преодолею его?

— 20.03.2019 19:03

Вы не можете работать с max-height: auto;. Вы должны указать высоту, иначе она не будет увеличиваться.

— 20.03.2019 19:05

@yavg Обновил мой ответ.

— 20.03.2019 19:16

20.03.2019 18:58