Плавное действие по высоте, css

@Gerd199 · 29.07.2019, 19:29. **Показов** 2050. **Ответов** 5

Студворк — интернет-сервис помощи студентам

height: 200;
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;

Анимация работает, но как сделать так, чтобы анимация работала а высота была по контенту.
Если 100%, не работает, auto тоже, min-content, не работает анимация

@AlexZaw · 29.07.2019, 20:31

Сообщение от Gerd199

Анимация работает, но как сделать так, чтобы анимация работала а высота была по контенту.

Использовать js.
Если грубо то вот так:

HTML5
1
2
<div class="hover">Hover me</div>
<div class="hidden"><p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, eveniet! Repudiandae voluptas obcaecati accusamus, sit nisi repellat, ipsam quaerat nam vero illum recusandae pariatur dolorem labore consectetur soluta est suscipit nemo ullam nobis veritatis. Perferendis iste aspernatur voluptatibus facere assumenda inventore velit quae harum sequi. Officiis officia delectus sequi cumque libero alias, magni ipsam odio accusamus. Vero ratione soluta atque perferendis sapiente facere voluptatem praesentium amet quia nihil rem est fugit perspiciatis corporis debitis, quasi, deserunt quo cumque dignissimos deleniti voluptatum tempore, adipisci dolores. Quia, deserunt assumenda sint omnis expedita, necessitatibus temporibus reiciendis a sequi fugit quibusdam beatae enim sapiente ullam modi architecto quod numquam. Maxime blanditiis numquam soluta ducimus illum excepturi! Commodi dolor eius voluptate ab inventore! Eos unde illo, iste blanditiis consectetur excepturi quidem eveniet, nisi recusandae quos deleniti obcaecati minus suscipit aut quisquam officiis, odio nihil adipisci rerum aliquam doloribus cum? Sit distinctio nisi in dignissimos, dolorem ut quia dolores minus labore eos dolor, deleniti eligendi incidunt suscipit pariatur earum quisquam et voluptas voluptates laudantium quam inventore aperiam accusamus. Officiis natus impedit praesentium rem ea, eaque excepturi dignissimos inventore ducimus? Repellat reprehenderit placeat possimus non sunt dolor sapiente autem a inventore, error voluptatum provident porro illum laboriosam!</p></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.hover{
  border: 1px solid #000;
  display: inline-block;
}
p{
  margin: 0;
}
.hidden{
  transition: all .5s;
  height: 0;
  overflow: hidden;
  background: #f00;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var hover = document.querySelector('.hover');
var hidden = document.querySelector('.hidden');
var content = document.querySelector('.content');
hover.addEventListener('mouseover', show);
hover.addEventListener('mouseout', hide);
function show(){
  hidden.style.height=getComputedStyle(content).height
};
function hide(){
  hidden.style.height=0;
}

p.s.min-content если не ошибаюсь, работает для ширины.

@Gerd199 · 30.07.2019, 02:03 **[ТС]**

Возможно без js реализовать? То есть через js добавляю класс, а вот анимация посредством css.

У меня сейчас анимация работает в том случаи если задать конкретную высоту.

@AlexZaw · 30.07.2019, 09:35

Сообщение от Gerd199

То есть через js добавляю класс, а вот анимация посредством css.

А какую высоту в классе вы будете указывать?

Сообщение от Gerd199

У меня сейчас анимация работает в том случаи если задать конкретную высоту.

К сожалению только так оно и работает.

@Gerd199 · 30.07.2019, 22:13 **[ТС]**

Как в таком случаи через js задать высоту блоку по содержимому, изначально неизвестна высота. То есть ее никак не определить, знаем что изначальная высота 50px. Еси раскрыть блок, высота будет 150.

JavaScript
1
$('.post', 0).css({padding:'0,5', height:0, display:'block'}).animate({height:'100%', padding:5}, 300);

Раскрывает блок. Но без анимации.

@AlexZaw · 30.07.2019, 22:36

Сообщение от Gerd199

Как в таком случаи через js задать высоту блоку по содержимому, изначально неизвестна высота.

Посмотрите внимательно на мой код. В нем есть блок с нулевой высотой в котором находится блок с контентом. С помощью js у блока с контентом можно получить высоту, так как у него она не нулевая.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Gerd199 Заблокирован

	Плавное действие по высоте, css 29.07.2019, 19:29. Показов 2050. Ответов 5 Метки нет (Все метки) height: 200; -webkit-transition: height 0.5s ease-in-out; -moz-transition: height 0.5s ease-in-out; transition: height 0.5s ease-in-out; Анимация работает, но как сделать так, чтобы анимация работала а высота была по контенту. Если 100%, не работает, auto тоже, min-content, не работает анимация 0

@Gerd199 Заблокирован
	30.07.2019, 02:03 [ТС]
	Возможно без js реализовать? То есть через js добавляю класс, а вот анимация посредством css. У меня сейчас анимация работает в том случаи если задать конкретную высоту. 0