Создание анимационного листинга элементов на CSS3 (свойство transition) | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! После двух недель молчания, я снова в деле. Итак, сегодня я хотел бы показать Вам как с помощью только CSS3, можно сделать анимационный листинг элементов (элементов списка ul) с возможностью выбрать в каком виде будет находиться список. Чтобы пользователю было удобнее выбирать вид списка, возможные варианты предоставлены картинками. По нажатию на каждую кнопку, элементы преобразуется в определенный стиль расположения данных. Да что об этом говорить, лучше один раз увидеть.

Результат

В результате будет четыре возможных представления списка:

изображения с текстом в три колонки;
только текст;
изображение с текстом в одной колонке;
только изображение.

По-умолчанию является первый вариант, поэтому наш список будет представлен в трех колонках элемент столбца содержит изображение и текст.

Для переключения между представлениями, создадим четыре кнопочки. Эти кнопки будут выполнены в два слоя. Первый — самый важный, это радио кнопка, она будет прозрачной. Второй — картинка по которой будут щелкать.

Разметка HTML

Мы будем использовать неупорядоченный список для отображения элементов. Но начнем с переключателя. Разметка выглядит так:

1
2
3
4
5
6
7
8
9
10
11

Теперь непосредственно сам список с элементами, полностью копировать всю разметку не буду. Приведу лишь пару элементов для наглядности:

1
2
3
4
5
6
7
8
9
10
11

<ul id="item-list">
<li>
<img src="images/angrybird.png" />
Angry Birds Space PremiumRovio Mobile Ltd.
</li>
<li>
<img src="images/omgpop.png" />
Draw SomethingOMGPOP
</li>

</ul>

Стили CSS

Начнем также с описания стилей кнопок переключателей.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

input[type=radio] {
position: absolute;
z-index: 100;
opacity: 0;
cursor: pointer;
height: 110px;
width: 40px;
margin-top: -7em;
}

.control {
display: inline-block;
margin: 0 -.13em;
width: 40px;
background: #eddfc7;
padding: 5px 3px 1px 2px;
border-right: 1px solid #e0cba0;
cursor: pointer;
vertical-align: bottom;
}

С помощью CSS селектора выбираем все поля input с типом radio, таких у нас 4 — это как раз переключатели. Как уже говорилось выше они будут скрыты от глаз, свойство opacity значение 0. И самое важное высота этого элемента достаточно большая 110px, а также абсолютное позиционирование.

Изображение переключателя, точнее элемент span с классом .control, который его окружает. Делаем встроенным блоком, который обтекается другими в нашем случае радио-кнопкой — свойство display со значением inline-block. Таким образом изображение переключателя накладывается на поле radio.

В итоге переключатель представлений списка получился вот таким:

Ну и последнее, что касается переключателя. Это действие при наведении курсора мыши. Выбранный элемент выделяется внутренней тенью. Выбираем нужный элемент с помощью псевдокласса :hover — при наведении, и :checked — активный переключатель.

1
2
3
4
5

.control:hover,
input[type=radio]:hover + .control,
input[type=radio]:checked + .control {
box-shadow: inset 0px 0px 20px #d3b67a;
}

Переходим к стилям списка, который имеет идентификатор item-list. Ключевым здесь является отключение маркеров в списке — свойство list-style-type со значением none.

1
2
3
4
5
6

#item-list {
margin-top: 2em;
padding: 0;
list-style-type: none;
text-align: left;
}

Что касается первоначального вида списка, то это изображение с текстом в три колонки. Поэтому опишем первоначальный стиль для элементов.

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

#item-list li {
display: inline-block;
width: 300px;
vertical-align: top;
margin: 0 0.5em 1em 0;
padding: 10px;
background: #f3eada;
border-radius: 5px;
box-shadow: inset 0px 0px 20px #e0cba0;
overflow: hidden;
}

#item-list li img {
display: inline-block;
vertical-align: top;
width: 100px;
margin-right: .5em;
}

#item-list li p {
display: inline-block;
width: 180px;
margin: 0;
padding: 0;
}

В принципе все свойства понятны, остановлюсь лишь на главных. Сам элемент списка имеет ширину в 300 пикселей, является встроенным блочным элементом — inline-block. отображается только область внутри элемента списка, остальное скрыто — overflow: hidden. Элемент с закругленными углами — border-radius:5px и внутренней тенью — box-shadow: inset ….

Изображение и текст также встроенные блочные элементы, с фиксированной шириной.

Анимация

Собственно самый ответственный момент. Это описание действий при нажатии на радио кнопку. Следующие 4 способа представления списка похожи, манипулировать мы будем лишь шириной элементов и свойством видимости (включать и выключать видимость). Сам эффект анимации основан на свойстве CSS3 transition, которое я более подробно рассматривал в одном из предыдущих уроков — CSS слайдер изображений с эскизами.

Итак, первый вариант списка — изображение с текстом в три колонки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.view-control-1:checked ~ #item-list li img {
opacity: 1;
width: 100px;
visibility: visible;
transition: .4s .4s ease-out;
}

.view-control-1:checked ~ #item-list li p {
opacity: 1;
visibility: visible;
transition: .4s ease-out;
}

.view-control-1:checked ~ #item-list li {
width: 300px;
transition: .4s ease-out;
}

Работает это так. Нажимаем к примеру на первую радио кнопку (view-control-1) и она становится активной, теперь благодаря CSS селектору отслеживаем, какая из четырех кнопок выбрана (view-control-1:checked) и выбираем все элементы в списке (~ #item-list li), присваивая при этом каждому элементу новые свойства.

Сначала делаем изображения в каждом элементе списка видимыми visibility:visible и не прозрачным opacity:1, задаем ширину в 100 пикселей и все это происходит плавно в течении 4х десятых секунды благодаря свойству transition. Эффект длится в течении 4х десятых секунды с такой же задержкой, функция анимации ease-out.

Далее подобным образом присваиваем свойства для текста и элемента списка в целом, задавая ему ширину в 300 пикселей.

Второй вариант списка — только текст:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.view-control-2:checked ~ #item-list li img {
opacity: 0;
width: 0;
visibility: hidden;
transition: .4s ease-out;
}

.view-control-2:checked ~ #item-list li p {
opacity: 1;
visibility: visible;
transition: .4s ease-out;
}

.view-control-2:checked ~ #item-list li {
width: 900px;
transition: .4s .4s ease-out;
}

Здесь все аналогично как и в предыдущем варианте. Единственное, что изображение скрывается — visibility:hidden, и элемент списка растягиваем на всю ширину списка width:900px.

Третий вариант списка — изображение и текст в одну колонку:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.view-control-3:checked ~ #item-list li img {
opacity: 1;
width: 100;
visibility: visible;
transition: .4s ease-out;
}

.view-control-3:checked ~ #item-list li p {
opacity: 1;
visibility: visible;
transition: .4s ease-out;
}

.view-control-3:checked ~ #item-list li {
width: 900px;
transition: .4s ease-out;
}

Снова возвращаем изображение, ширина остается прежней — 900px. Таким образом список строится в одну колонку с текстом и картинкой.

Четвертый, последний вариант отображения списка — только картинка:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.view-control-4:checked ~ #item-list li img {
opacity: 1;
width: 100;
visibility: visible;
transition: .4s ease-out;
}

.view-control-4:checked ~ #item-list li p {
opacity: 0;
position: absolute;
visibility: hidden;
transition: .4s ease-out;
}

.view-control-4:checked ~ #item-list li {
width: 100px;
transition: .4s ease-out;
}

В данном варианте скрываем текст, остается лишь изображение. А элемент списка принимает ширину в 100px.

На этом все. Вот таким образом на сайте можно организовать листинг элементов списка. Но если у вас не хватает сноровки самому сделать подобный эффект, то всегда можно обратиться к специалистам, например в Киеве.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или Facebook. Если урок Вам понравился и пригодился сделайте tweet или like — поделитесь с друзьями 🙂

Источник статьи/урока: https://xozblog.ru

По материалам: http://www.webstuffshare.com/2012/04/how-to-create-animated-list-view-using-css3-only/

Правила перепечатки

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Создание анимационного листинга элементов на CSS3

Просмотр демо страницы и скачивание исходников не доступно

Результат

Разметка HTML

Стили CSS

Анимация

Просмотр демо страницы и скачивание исходников не доступно