Плавно показать/скрыть элементы

@damix · Регистрация: 04.11.2013

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

Есть такой код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<head>
    <meta charset="UTF-8">
    <title>Transitions </title>
    <style>
        #hiddenblock {
            height: 0;
            overflow: hidden;
            transition: height 5s ease-in-out;
        }
    </style>
    <script>
      
    function foo(opt) {
        var elem = document.getElementById('hiddenblock');
        var o = opt[0].label;
        switch (o) {
            case 'Hide':
                elem.style.height = "0";
                break;
            case 'Show':
                elem.style.height = "auto";
                break;
            default: 
                console.log("Unknown value")
        }
    }
      
    </script>
</head>
<body>
    <h1>Transitions </h1>
    <select onchange="foo(this.selectedOptions)">
        <option>Hide</option>
        <option>Show</option>
    </select>
    <div id="hiddenblock">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus diam, bibendum et eleifend aliquam, maximus in turpis. Nulla nec nisl at est consectetur lobortis. Nulla ac felis nisl. Fusce eu elementum mauris. Vestibulum sem nunc, eleifend ac turpis id, bibendum ultricies elit. Integer in facilisis odio, id venenatis mi. Vivamus lacinia, nibh vitae elementum blandit, risus purus volutpat ante, tempus vehicula orci nulla at diam. Pellentesque sed sapien purus. Mauris ut suscipit tortor. DHidec viverra pretium ex vitae vehicula. Nulla luctus varius dui et maximus. Sed ac pellentesque erat. Quisque sed urna diam. Maecenas placerat tristique malesuada. 
    </div>
</body>
</html>

Надо, чтобы когда пользователь выбирает определенное значение из выпадающего списка, блок плавно показывался/скрывался.
Попытался создать функцию на JS, которая вызывается при смене значения выпадающего списка и меняет высоту блока через DOM, но свойство transition (строка 9) не работает, блок появляется и исчезает резко, как если бы этого свойства не было.
Как сделать, чтобы блок выдвигался и задвигался постепенно? или как вообще сделать то же самое на чистом CSS без JS если это возможно?

@galawar · 09.04.2018, 22:02

Можно так, самый простой вариант:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
    <meta charset="UTF-8">
    <title>Transitions </title>
    <script>
      
    function foo(opt) {
        var elem = document.getElementById('hiddenblock');
        var o = opt[0].label;
        switch (o) {
            case 'Hide':
                elem.classList.add('is-active');
                break;
            case 'Show':
                elem.classList.remove('is-active');
                break;
            default: 
                console.log("Unknown value")
        }
    }
      
    </script>
</head>
<body>
    <h1>Transitions </h1>
    <select onchange="foo(this.selectedOptions)">
        <option>Hide</option>
        <option>Show</option>
    </select>
    <div id="hiddenblock" class="hiddenblock">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus diam, bibendum et eleifend aliquam, maximus in turpis. Nulla nec nisl at est consectetur lobortis. Nulla ac felis nisl. Fusce eu elementum mauris. Vestibulum sem nunc, eleifend ac turpis id, bibendum ultricies elit. Integer in facilisis odio, id venenatis mi. Vivamus lacinia, nibh vitae elementum blandit, risus purus volutpat ante, tempus vehicula orci nulla at diam. Pellentesque sed sapien purus. Mauris ut suscipit tortor. DHidec viverra pretium ex vitae vehicula. Nulla luctus varius dui et maximus. Sed ac pellentesque erat. Quisque sed urna diam. Maecenas placerat tristique malesuada. 
    </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.hiddenblock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all ease .3s;
  transform: translate(0, -20%);
}
 
.hiddenblock.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: all ease .3s;
  transform: translate(0, 0);
}

@damix · 10.04.2018, 14:59 **[ТС]**

Вернее, вот так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
    <meta charset="UTF-8">
    <title>Transitions </title>
    <script>
      
    function foo(opt) {
        var elem = document.getElementById('hiddenblock');
        var o = opt[0].label;
        switch (o) {
            case 'Hide':
                elem.classList.remove('is-active');
                break;
            case 'Show':
                elem.classList.add('is-active');
                break;
            default: 
                console.log("Unknown value")
        }
    }
      
    </script>
</head>
<body>
    <h1>Transitions </h1>
    <select onchange="foo(this.selectedOptions)">
        <option>Hide</option>
        <option>Show</option>
    </select>
    <div id="hiddenblock" class="hiddenblock">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus diam, bibendum et eleifend aliquam, maximus in turpis. Nulla nec nisl at est consectetur lobortis. Nulla ac felis nisl. Fusce eu elementum mauris. Vestibulum sem nunc, eleifend ac turpis id, bibendum ultricies elit. Integer in facilisis odio, id venenatis mi. Vivamus lacinia, nibh vitae elementum blandit, risus purus volutpat ante, tempus vehicula orci nulla at diam. Pellentesque sed sapien purus. Mauris ut suscipit tortor. DHidec viverra pretium ex vitae vehicula. Nulla luctus varius dui et maximus. Sed ac pellentesque erat. Quisque sed urna diam. Maecenas placerat tristique malesuada. 
    </div>
</body>
</html>

add и remove надо местами поменять, но неважно.

Это красиво, но немного не в том стиле. Мне нужно, чтобы блок просто выезжал и заезжал, типа как меню в этом примере:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
 
 
<style type="text/css"><!--
section
{
    display: block;
}
.accordion{
    background-color: #E8EDE3;
    border: 2px solid #539127;
    width: 600px;
    padding: 10px;
    margin: 0 auto;
}
.accordion section{
    border: 1px solid #539127;
    margin: 5px;
    background-color: #fff;
}
.accordion h1, .accordion p{
    margin: 0;
}
.accordion p{
    padding: 5px;
}
.accordion h1 a{
    display: block;
    position: relative;
    font: 14px;
    padding: 8px;
    color: #333;
    text-decoration: none;
}
.accordion h1 a:hover {
    background: #EEEEFF;
}
.accordion h1 + div {
    height: 0;
    overflow: hidden;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}
.accordion :target h1 a:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -3px;
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.accordion :target h1 + div {
    height: 200px;
}
-->
</style>
</head>
<body>
 
 
<div class="main">
        <div class="accordion">
            <section id="one">
                <h1><a href="#one">Раздел 1</a></h1>
                <div>
                    <p>Это текст раздела 1</p>
                    <p>Это текст раздела 1</p>
                    <p>Это текст раздела 1</p>
                    <p>Это текст раздела 1</p>
                    <p>Это текст раздела 1</p>
                    <p>Это текст раздела 1</p>
                </div>
            </section>
 
 
            <section id="two">
                <h1><a href="#two">Раздел 2</a></h1>
                <div>
                    <p>Это текст раздела 2</p>
                    <p>Это текст раздела 2</p>
                    <p>Это текст раздела 2</p>
                    <p>Это текст раздела 2</p>
                </div>
            </section>
 
            <section id="three">
                <h1><a href="#three">Раздел 3</a></h1>
                <div>
                    <p>Это текст раздела 3</p>
                    <p>Это текст раздела 3</p>
                    <p>Это текст раздела 3</p>
                    <p>Это текст раздела 3</p>
                    <p>Это текст раздела 3</p>
                    <p>Это текст раздела 3</p>
                    <p>Это текст раздела 3</p>
                </div>
            </section>
 
            <section id="four">
                <h1><a href="#four">Раздел 4</a></h1>
                <div>
                    <p>Это текст раздела 4</p>
                    <p>Это текст раздела 4</p>
                    <p>Это текст раздела 4</p>
                    <p>Это текст раздела 4</p>
                    <p>Это текст раздела 4</p>
                    <p>Это текст раздела 4</p>
                </div>
            </section>
 
            <section id="five">
                <h1><a href="#five">Раздел 5</a></h1>
                <div>
                    <p>Это текст раздела 5</p>
                    <p>Это текст раздела 5</p>
                    <p>Это текст раздела 5</p>
                    <p>Это текст раздела 5</p>
                    <p>Это текст раздела 5</p>
                </div>
            </section>
        </div>
</div>
</body>
</html>

Вот так работает

CSS
1
2
3
4
5
6
7
8
        .hiddenblock {
          height: 0;
          overflow: hidden;
          transition: height 1s;
        }
 
        .hiddenblock.is-active {
          height: 200px;

но только если задать height явно в пикселях (строка 8), если сделать height: auto; то не работает. Почему так?

@Mailo · 10.04.2018, 17:37

Jquerry нннада?

JavaScript
1
2
3
  $(".link").click(function() {
        $(".popup").slideToggle();
    });

@damix · 10.04.2018, 21:59 **[ТС]**

Mailo, тоже вариант, если на сайте используется JQuerry (как в моем случае).
А вот если без библиотек, то есть такой костыль: задать max-height больше, чем блок когда-либо займет и использовать это свойство вместо height.
А вообще почему нельзя использовать transition именно с height: auto? Эта проблема была еще в 2010, странно, что ее до сих пор не пофиксили.

@damix · 22.01.2024, 21:36 **[ТС]**

UPD 2024

Нашел новый способ сделать то же самое без Jquerry и max-height

as many commenters noted, you have to set your max-height value very close to the actual height or you'll get a delay

Использовать CSS grid layout

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
    <meta charset="UTF-8">
    <title>Transitions </title>
    <script>
      
    function foo(opt) {
        var elem = document.getElementById('outer-block');
        var o = opt[0].label;
        switch (o) {
            case 'Hide':
                elem.classList.remove('is-active');
                break;
            case 'Show':
                elem.classList.add('is-active');
                break;
            default: 
                console.log("Unknown value")
        }
    }
      
    </script>
</head>
<body>
      <h1>Transitions </h1>
      <select onchange="foo(this.selectedOptions)">
          <option>Hide</option>
          <option>Show</option>
      </select>
      <div id="outer-block" class="outer-block">
        <div id="hiddenblock" class="hiddenblock">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus diam, bibendum et eleifend aliquam, maximus in turpis. Nulla nec nisl at est consectetur lobortis. Nulla ac felis nisl. Fusce eu elementum mauris. Vestibulum sem nunc, eleifend ac turpis id, bibendum ultricies elit. Integer in facilisis odio, id venenatis mi. Vivamus lacinia, nibh vitae elementum blandit, risus purus volutpat ante, tempus vehicula orci nulla at diam. Pellentesque sed sapien purus. Mauris ut suscipit tortor. DHidec viverra pretium ex vitae vehicula. Nulla luctus varius dui et maximus. Sed ac pellentesque erat. Quisque sed urna diam. Maecenas placerat tristique malesuada. 
        </div>
      </div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.hiddenblock {
  overflow: hidden;
}
 
.outer-block {
  display: grid;
  grid-template-rows: 0fr;
  transition-property: grid-template-rows;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
 
.is-active {
  grid-template-rows: 1fr;
}

@NTHing · 22.01.2024, 23:24

Вариант элегантный но, ненадёжный, к сожалению...

CSS
1
2
3
4
.outer-block {
    padding: 2rem;
    border: 5px solid grey;
}

@damix · 23.01.2024, 00:48 **[ТС]**

NTHing, чем ненадежный? Вижу по нижней границе блока, что она плавно двигается, как и положено.

@rr33rr · 23.01.2024, 04:38

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

Плавно показать/скрыть элементы

Как вариант:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Transitions</title>
<style>
.block {
  overflow: hidden;
  max-height: 1000px;
  transition: max-height 0.5s cubic-bezier(1, 0, 1, 0);
}
.hide {
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}
.inner {
  padding: 0.5em 1em;
  background: #ddd;
}
</style>
</head>
<body>
<h1>Transitions</h1>
<select onchange="document.getElementById('toggle').classList.toggle('hide');">
  <option>Hide</option>
  <option>Show</option>
</select>
<div id="toggle" class="block hide">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus diam, bibendum et eleifend aliquam, maximus in turpis. Nulla nec nisl at est consectetur lobortis. Nulla ac felis nisl. Fusce eu elementum mauris. Vestibulum sem nunc, eleifend ac turpis id, bibendum ultricies elit. Integer in facilisis odio, id venenatis mi. Vivamus lacinia, nibh vitae elementum blandit, risus purus volutpat ante, tempus vehicula orci nulla at diam. Pellentesque sed sapien purus. Mauris ut suscipit tortor. DHidec viverra pretium ex vitae vehicula. Nulla luctus varius dui et maximus. Sed ac pellentesque erat. Quisque sed urna diam. Maecenas placerat tristique malesuada.
  </div>
</div>
</body>
</html>

См в песочнице

Упс. Не увидел ваше сообщение про "костыль" (

@NTHing · 23.01.2024, 07:26

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

блок .../скрывался.

и

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

чем ненадежный?

При добавлении хотя бы бордера этот бордер виден в состоянии hide

@damix · 23.01.2024, 07:28 **[ТС]**

Ну это как бы ожидаемо. Размеры считаются за исключением padding и границ.

Новые блоги и статьи Все статьи Все блоги /
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .

@damix 53 / 47 / 22 Регистрация: 04.11.2013 Сообщений: 404
	10.04.2018, 21:59 [ТС]
	Mailo, тоже вариант, если на сайте используется JQuerry (как в моем случае). А вот если без библиотек, то есть такой костыль: задать max-height больше, чем блок когда-либо займет и использовать это свойство вместо height. А вообще почему нельзя использовать transition именно с height: auto? Эта проблема была еще в 2010, странно, что ее до сих пор не пофиксили. 0

@damix 53 / 47 / 22 Регистрация: 04.11.2013 Сообщений: 404
	23.01.2024, 00:48 [ТС]
	NTHing, чем ненадежный? Вижу по нижней границе блока, что она плавно двигается, как и положено. 0

@damix 53 / 47 / 22 Регистрация: 04.11.2013 Сообщений: 404
	23.01.2024, 07:28 [ТС]
	Ну это как бы ожидаемо. Размеры считаются за исключением padding и границ. 0