Анимированные элементы списка

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

Представляем контент

Анимация может быть полезна, помогая посетителям понять, когда что-то меняется на вашем сайте. Когда контент добавляется или удаляется без какой-либо анимации, они могут пропустить внезапные изменения и запутаться. Добавление тонких анимаций может избежать этого и помочь, «объявив», что что-то собирается покинуть страницу или быть представленным на ней.

Одним из примеров добавления или удаления содержимого является управление содержимым списка. Большинство анимаций можно использовать для других видов контента. Если вы найдете их полезными или хотите добавить другие идеи, свяжитесь с нами, мы будем рады услышать ваши мысли.

Настройка HTML

Для начала мы будем использовать предварительно заполненный список и кнопку для добавления новых элементов в список.

<ul id="list">
  <li class="show">List item</li>
  <li class="show">List item</li>
</ul>
<button id="add-to-list">Add a list item</button>

Несколько вещей, на которые стоит обратить внимание. Во-первых, у нас есть два идентификатора в HTML. Обычно мы не используем идентификаторы для стилизации, поскольку они могут создавать проблемы с их спецификой. Однако они полезны при использовании JavaScript.

Исходные элементы имеют класс «show», так как этот класс мы будем использовать позже, чтобы добавить эффект анимации.

Немного JavaScript

В целях демонстрации мы создадим небольшой JavaScript-код для добавления нового элемента в список, а затем добавим класс «show», чтобы анимация могла быть к месту. Есть причина использовать этот двухэтапный процесс. Если бы элементы списка были добавлены в видимом состоянии, у перехода не было бы времени.

Мы могли бы обойти это, используя анимацию для элементов li, но их было бы труднее переопределить при удалении элементов с другой анимацией.

/*
* Add items to a list - from cssanimation.rocks/list-items/
*/
document.getElementById('add-to-list').onclick = function() {
  var list = document.getElementById('list');
  var newLI = document.createElement('li');
  newLI.innerHTML = 'A new item';
  list.appendChild(newLI);
  setTimeout(function() {
    newLI.className = newLI.className + " show";
  }, 10);
}

Нет анимации

По сути, мы можем написать немного CSS для отображения элементов списка. Мы используем класс show как способ сделать их видимыми, поэтому удаление класса show также должно привести к их исчезновению.

li {
  list-style: none;
  background: #d1703c;
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  overflow: hidden;
  width: 10em;
}

li.show {
  height: 2em;
  margin: 2px 0;
}

В этих стилях мы устанавливаем элементы li, чтобы они выглядели как прямоугольники, без точек маркера и установили им значения свойств height в 0, margin в 0 и устанавливаем overflow скрытым. Это сделано для того, чтобы они были невидимыми, пока мы не применим класс шоу.

Класс show использует высоту и отступ. Так как мы еще не используем анимацию, элементы должны внезапно появиться на странице, вот так. Также попробуйте нажать на элементы списка, чтобы они исчезли.

Исчезать

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

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

.fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
  height: 2em;
}
.fade li.show {
  opacity: 1;
}

Опускаться вниз и исчезать

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

Разница между этим классом и классом fade заключается только в том, что строка height: 2em была удалена. Так как класс show содержит заданную высоту (унаследованную из первого фрагмента CSS), он автоматически изменит высоту.

.slide-fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
}
.slide-fade li.show {
  opacity: 1;
}

Вращение

Наряду с выцветанием и скольжением, мы можем пойти дальше, добавив небольшой 3D-эффект. Браузер может преобразовывать элементы более чем в направлениях X или Y, что полезно для увеличения глубины сцен.

Чтобы настроить это, нам нужно определить section как этап, на котором происходят трехмерные переходы. Мы делаем это, устанавливая значение perspective.

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

.swing {
  perspective: 100px;
}

Затем мы настраиваем элементы li для преобразования на место. Мы будем использовать свойство opacity, чтобы создать эффект затухания, как и раньше, но добавим  в transform, чтобы повернуть li на место.

.swing li {
  opacity: 0;
  transform: rotateX(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

.swing li.show {
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

В этом примере мы начинаем с li, повернутого назад на 90 градусов. Когда класс show добавлен, transform устанавливается равным none, что позволяет ему переходить на место. Чтобы придать ему эффект поворота, я использовал временную функцию cubic-bezier.

Вращение сбоку

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

Для создания этого эффекта достаточно изменить только ось вращения.

.swing li {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

Все, что мы изменили, это rotateX на rotateY.

Префиксы и тестирование браузера

Приведенный выше код не содержит префиксов для удобства чтения. Настоятельно рекомендуется добавить префиксы для поддержки браузеров, которым нужен префикс -webkit или другие. Я использую Autoprefixer, чтобы не беспокоиться об этих вещах.

Поскольку эти анимации располагаются поверх основного механизма «показать / скрыть», они должны изящно убираться в браузерах, которые не поддерживают анимации. Тестирование на различных устройствах и браузерах важно, но большинство современных браузеров должны поддерживать эти анимации.

Make sure to follow on Twitter for all the latest updates!