Как сделать плавное появление height? [дубликат]
162
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 и получить плавные появления блоков и многое другое.
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47563 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30496 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23632 visits
- Как через css изменить цвет png изображения? 10350 visits
- Blob video url download 9958 visits
- Php curl запрос через прокси с авторизацией 9210 visits
- Работа с captcha vk api 8094 visits
© "hostciti.net" 24.11.2024 | 23:18