Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
0 / 0 / 0
Регистрация: 27.07.2013
Сообщений: 63
1

Добавить transition

27.05.2014, 16:39. Показов 1276. Ответов 6
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Всем приветы.

У меня есть код типа спойлера на html и css, без явы.

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

<style>
        .spoiler {
  display: none;
 
}
.spoiler1 {
  display: none;
           
}
  
class="dynamic"
a.dynamic {
    border-bottom: 1px dashed #0066CC;
    text-decoration: none;
 
}
        </style>      
         
         
         
                 <div class="bg-janr-block">
    <div class="main">
        <div class="janr-block">
          <a class="dynamic janr-block-title" href="#" onclick="$('.spoiler').toggle();return false;">Подробнее...</a>  
   <div class="janr-block-content">
    
       <div class="spoiler">
Текстики
       </div>
            <div style="clear: both;"></div>
                </div>
 
            </div>
        </div>
       </div>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 27.05.2014, 16:39
Ответы с готовыми решениями:

Что такое -webkit-transition, -moz-transition, -o-transition?
Изучаю анимацию в css с помощью transition. В каждом примере вижу похожую запись. ...

CSS3 transition
Тот кто пользовался CSS3 скорее всего знает, что при использовании transition элемент размывается...

Возможности Transition
Можно ли задать много свойств для анимации элемента, напрмер при наведении? .block {...

Transition не работает
Привет всем! Какой-то невообразимый баг - анимацию делаю, с применением transition. Всё...

6
43 / 43 / 25
Регистрация: 21.07.2013
Сообщений: 357
27.05.2014, 17:44 2
а в чем заключается вопрос?
0
37 / 37 / 4
Регистрация: 17.07.2011
Сообщений: 200
27.05.2014, 17:47 3
PlayUser, как без js? a jQuery?
1
43 / 43 / 25
Регистрация: 21.07.2013
Сообщений: 357
27.05.2014, 17:59 4
HTML5
1
2
3
4
5

<div class="shortcode-toggle toggle-show-the-content white border closed"><h4 class="toggle-trigger"><a href="#">Показать содержимое блока</a></h4>
   <div style="display: none;" class="toggle-content">
       ТУТ ЛЮБОЙ КОНТЕНТ
   </div>
</div>
CSS
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

.shortcode-toggle { 
  margin: 0 0 1.2em;
}
 
.shortcode-toggle h4 {
  margin: 0;
}
 
.shortcode-toggle h4 a { 
  display: block;
  padding: 3px 0 3px 10px; 
  background: #f3f3f3 url(../img/minus.png) no-repeat 99% center; 
}
 
.shortcode-toggle.closed h4 a {
  background-image: url(../img/plus.png); 
}
 
.shortcode-toggle .toggle-content  { 
  padding: 10px 10px; 
  background: #f9f9f9; 
}
 
.shortcode-toggle.closed .toggle-content, .shortcode-toggle .more-text.closed { 
  display: none; 
}
 
.shortcode-toggle .more-text.open { 
  display: block; 
}
 
.shortcode-toggle.border { 
  border: 1px solid #EBEBEB;
}
Javascript
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

jQuery(function($) {
    
 
    
    if ( jQuery( '.shortcode-toggle').length ) {    
        
        jQuery( '.shortcode-toggle').each( function () {
            
            var toggleObj = jQuery(this);
            
            toggleObj.closedText = toggleObj.find( 'input[name="title_closed"]').attr( 'value' );
            toggleObj.openText = toggleObj.find( 'input[name="title_open"]').attr( 'value' );
            
            // Add logic for the optional excerpt text.
            if ( toggleObj.find( 'a.more-link.read-more' ).length ) {
                toggleObj.readMoreText = toggleObj.find( 'a.more-link.read-more' ).text();
                toggleObj.readLessText = toggleObj.find( 'a.more-link.read-more' ).attr('readless');
                toggleObj.find( 'a.more-link.read-more' ).removeAttr('readless');
                
                toggleObj.find( 'a.more-link' ).click( function () {
                    
                    var moreTextObj = jQuery( this ).next( '.more-text' );
                    
                    moreTextObj.animate({ opacity: 'toggle', height: 'toggle' }, 300).css( 'display', 'block' );
                    moreTextObj.toggleClass( 'open' ).toggleClass( 'closed' );
                    
                    if ( moreTextObj.hasClass( 'open') ) {
                    
                        jQuery(this).text(toggleObj.readLessText);
                    
                    } // End IF Statement
                    
                    if ( moreTextObj.hasClass( 'closed') ) {
                    
                        jQuery(this).text(toggleObj.readMoreText);
                    
                    } // End IF Statement
                    
                    return false;
                });
            }
            
            toggleObj.find( 'input[name="title_closed"]').remove();
            toggleObj.find( 'input[name="title_open"]').remove();
            
            toggleObj.find( 'h4.toggle-trigger a').click( function () {
            
                toggleObj.find( '.toggle-content').animate({ opacity: 'toggle', height: 'toggle' }, 300);
                toggleObj.toggleClass( 'open' ).toggleClass( 'closed' );
                
                if ( toggleObj.hasClass( 'open') ) {
                
                    jQuery(this).text(toggleObj.openText);
                
                } // End IF Statement
                
                if ( toggleObj.hasClass( 'closed') ) {
                
                    jQuery(this).text(toggleObj.closedText);
                
                } // End IF Statement
                
                return false;
            
            });
                    
        });
 
 
    } // End IF Statement
    
}); // jQuery()
1
0 / 0 / 0
Регистрация: 27.07.2013
Сообщений: 63
27.05.2014, 18:33  [ТС] 5
Я думал, что-бы много jQuery не писать, сделать transition что-бы плавно было... но не получается
0
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
27.05.2014, 19:45 6
Анимацию можно сделать и на CSS, если высота разворачиваемого содержимого будет строго задана.
http://jsbin.com/pagot/1/edit?html,css,output
HTML5
1
2
3
4
5
6
7
8
9
10

<div class="spoiler__container">
    <input id="spoiler__checkbox-id" type="checkbox">
    <label class="spoiler__button" for="spoiler__checkbox-id">Show / Hide</label>
    <div class="spoiler__toggleable-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Aliquam ipsam voluptates totam porro sint sequi fugiat esse nobis 
        id quos omnis sit sed quo doloribus aut consequatur quae? 
        Magni veritatis.</p>
    </div>
</div>
CSS
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

.spoiler__container {
  width: 240px;
  margin: 0 auto;
  padding: 10px 15px;
  border: 1px solid #464646;
}
 
#spoiler__checkbox-id {
  display: none;
}
 
.spoiler__button {
  display: inline-block;
  cursor: pointer;
}
 
.spoiler__toggleable-content {
  opacity: 0;
  overflow: hidden;
  height: 0;
  
  transition: 
    height .35s ease-in-out,
    opacity .5s linear .25s;
}
 
#spoiler__checkbox-id:checked {}
 
#spoiler__checkbox-id:checked + .spoiler__button {
  color: #00a5f5;
}
 
#spoiler__checkbox-id:checked ~ .spoiler__toggleable-content {
  height: 250px;
  opacity: 1;
}
1
0 / 0 / 0
Регистрация: 27.07.2013
Сообщений: 63
27.05.2014, 20:37  [ТС] 7
monochromer, о да. То что надо)
Спасибо. +
0
27.05.2014, 20:37
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 27.05.2014, 20:37
Помогаю со студенческими работами здесь

Свойства transition
Всем добрый! есть свойства выпадающей менюхи .menu li:hover ul {/* выводит список */...

Transition на псевдоэлементах
Сижу и чет не могу понять почему не срабатывает transition на псевдоэлементе before. Гляньте...

CSS Transition
Добрый день уважаемые спецы. Написал на css и html выпадающее меню, хотел немного украсить с...

CSS transition
Добрый день! Подскажите пожалуйста, необходимо сделать 4 наклона шестиугольника с помощью...


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru