Как сделать плавное появление height? [дубликат]
217
27 ноября 2021, 00:50
На этот вопрос уже даны ответы здесь:
плавное увеличение height
(2 ответа)
Закрыт 1 год назад.
Есть такой код CSS:
.table-hidden{
height: 0;
overflow: hidden;
transition: 1s;
}
.table-visible{
height: auto;
overflow: visible;
transition: 1s;
}
и есть такой JS:
$('.services__title').click(function () {
$('.table-hidden').toggleClass('table-visible');
});
Хочу сделать плавное появление при height: auto;, если задать высоту в пикселях, то всё работает как надо, только вот фиксированная высота не нужна.
Answer 1
Лёгкий способ сделать это вместо height использовать max-height:
.table-hidden{
max-height: 0;
overflow: hidden;
transition: 1s;
}
.table-visible{
max-height: auto;
overflow: visible;
transition: 1s;
}
Answer 2
Крутая штука Animate.css, примеры анимация тут DEMO Animate.css, помогает сделать плавные анимации, в добавок ко всему можно туда же к нему засунуть WOW и получить плавные появления блоков и многое другое.
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
-
13:46
-
10:14
-
18:32
Сборка персонального компьютера от Artline: умный выбор для современных пользователей
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 49900 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31898 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25861 visits
- Как через css изменить цвет png изображения? 11718 visits
- Blob video url download 11266 visits
- Php curl запрос через прокси с авторизацией 10652 visits
- Работа с captcha vk api 9465 visits
© "hostciti.net" 12.12.2025 | 10:34