Пятница, 11 Января 2013 17:26

Показать/скрыть блок при помощи transition

Written by 
Оцени эту запись
(11 Голоса)

При верстке сайта часто нужно задавать динамику в виде появления пропадания элементов при каком-то событии. В данной статье я кратко расскажу о том, как при помощи нескольких строк CSS показать/скрыть блок при наведении.

 

 

Допустим, есть у нас блок:

 

<div class="trans">Text</div>

 

Используя свойство transition мы можем изменять параметры этого блока при наведении(:hover) или клике(:active).

 

Первое, что приходит в голову, это задать ему display: block, а при наведении display: none. Но так ничего не выйдет. Свойство transition может работать только с теми значениями, которые выражаются численно. 

 

Второе, что приходит в голову, это изменять при наведении его прозрачность opacity. Но тут есть нюанс - блок будет невидимым, но, как и прежде, будет занимать место в потоке. 

 

Вывод: для решения нашей задачи нам нужно менять при наведении два свойства - прозрачность и высоту.

 

 

.trans:hover {
            opacity:0;
            height: 0px;
}
.trans {
            -webkit-transition: opacity 2s, height 2s;
            height: 30px;
            background: blue;
            color: white;
}
 
 
Смотрим, что у нас получилось. Точнее, наводим курсор на блок, а потом уже смотрим))
 
 
Text
 
 
 
 

 

 
 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов