Анимиране на елементи от списъка

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

  • Артикул
  • Артикул

Представяне на съдържанието

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

Един пример за добавяне или премахване на съдържанието е управлението на списък. Повечето анимации могат да се използват и за други видове съдържание. Ако ги намерите за полезни или имате други идеи за добавяне,свържете се с мен, обичаме да чуваме вашите мисли.

Създаване на нужния HTML

За да започнем, ще използваме предварително попълнен списък и бутон за добавяне на нови елементи към списъка.

<ul id="list">
  <li class="show">Артикул</li>
  <li class="show">Артикул</li>
</ul>
<button id="add-to-list">Добавяне на Артикули </button>

Няколко неща, които трябва да се отбележат. Първо, имаме два елемента с id в HTML. Обикновено не използваме id за стилизиране, тъй като те могат да създадат проблеми със своята специфичност.Все пак са полезни, когато се използват за JavaScript.

Първоначалните елементи имат класа “show”, тъй като това е клас, който ще използваме по-късно, за да добавим анимационния ефект.

Малко JavaScript

За целите на демонстрацията ще създадем малък JavaScript код, за да добавим нов елемент към списъка, след което ще добавим класа “show”, за да може да реализираме анимацията. Има причина да използваме процес с 2 стъпки. Ако елементите от списъка бяха видими, нямаше да има време за прехода.

Можем да заобиколим това, като използваме анимация върху елементите “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” = hidden. Това е така, за да изглеждат невидими, докато не приложим клас “show”.

Класът “show” прилага “height” и “margin”. Тъй като все още не използваме анимация, елементите трябва да се появят внезапно на страницата. Също така опитайте да натиснете елементите от списъка, за да ги видите как изчезват.

  • Артикул
  • Артикул

Избледняване

Като първа анимация ще добавим ефект на избледняване. Елементите от списъка се появяват малко по-плавно от преди. Визуално това все още изглежда малко тромаво, но има предимството, че дава на зрителите повече време да забележат, че нещо се случва.

  • Артикул
  • Артикул

За да добавя ефекта, създадох отделен CSS. За да се приложи това към списъка, се прилага класа “fade” към елемента, обграждащ вашия списък (в нашия случай section).

.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 ефект. Браузърът може да трансформира елементите в повече посоки, освен тези по хоризонтала и вертикала, което е полезно за добавяне на дълбочина към сцените.

  • Артикул
  • Артикул

За да настроим това, трябва да определим, съдържащия елемент section като етап, в който се осъществяват 3D преходите. Правим това, като му даваме стойност на свойството 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, което му позволява да се върне на мястото си. За да му придам ефект на люлеене, използвах кубичната крива на Безие css функцията 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!