Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/18: Рейтинг темы: голосов - 18, средняя оценка - 4.67
36 / 31 / 18
Регистрация: 04.11.2013
Сообщений: 310
1

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

09.04.2018, 21:50. Показов 3234. Ответов 4
Метки нет (Все метки)

Есть такой код
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 если это возможно?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
09.04.2018, 21:50
Ответы с готовыми решениями:

Есть ли способ плавно вывести бордер при наведении, ну и плавно скрыть
Необходимо плавно вывести границу при наведении, и плавно чтобы скрывалась если убрать курсор. Что...

css скрыть\показать
Народ поскажите плиз как при помощи сss cкрыть какой нибудь элемент страницы, скажим &lt;p&gt;&lt;/p&gt; а при...

Показать/скрыть класс
Есть два класса: login-form и registration-from. Как при нажатии на &quot;Create account&quot; скрыть...

Показать скрыть блок DIV
Приветствую всех. Не могу справиться с задачкой. Пример следующий, имеется текст: &lt;div...

4
145 / 118 / 85
Регистрация: 09.04.2018
Сообщений: 329
09.04.2018, 22:02 2
Можно так, самый простой вариант:

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);
}
0
36 / 31 / 18
Регистрация: 04.11.2013
Сообщений: 310
10.04.2018, 14:59  [ТС] 3
Вернее, вот так:
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; то не работает. Почему так?
0
175 / 163 / 19
Регистрация: 18.02.2010
Сообщений: 1,603
10.04.2018, 17:37 4
Jquerry нннада?
Javascript
1
2
3
  $(".link").click(function() {
        $(".popup").slideToggle();
    });
1
36 / 31 / 18
Регистрация: 04.11.2013
Сообщений: 310
10.04.2018, 21:59  [ТС] 5
Mailo, тоже вариант, если на сайте используется JQuerry (как в моем случае).
А вот если без библиотек, то есть такой костыль: задать max-height больше, чем блок когда-либо займет и использовать это свойство вместо height.
А вообще почему нельзя использовать transition именно с height: auto? Эта проблема была еще в 2010, странно, что ее до сих пор не пофиксили.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
10.04.2018, 21:59

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Показать/скрыть элемент CSS
Не помню как раньше делал. Суть: нажимаем на &quot;Текст&quot;, появляется &quot;Элемент&quot;. Объяснить более...

Показать скрыть элемент текста
Как можно показать - скрыть при нажатии значек или элемент текста

Как можно скрыть и показать div id ?
допустим у меня есть менюшка &lt;div class=&quot;tabbed&quot; &gt; &lt;input type=&quot;radio&quot; name=&quot;tabs&quot;...

Скрыть текст, а показать картинки (постраничная навигация)
нужно на странице (Joomla) скрыть цифры и текст (в постраничной навигации), а вместо них отобразить...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.