Animowanie Elementów Listy

Kiedy fragmenty strony internetowej zmieniają się, dodanie animacji jest dobrym sposobem na wskazanie odwiedzającym co się dzieje.  Animacje mogą zapowiadać pojawienie się nowej treści lub przyciągnąć uwagę do treści, która jest w trakcie usuwania. W tym artykule, przyjrzymy się jak wprowadzenie nowej treści może być wykorzystane, pokazując i ukrywając elementy na liście.

Wprowadzenie treści

Animacja może być przydatna w przypadku gdy chcemy pomóc odwiedzającym zrozumieć kiedy rzeczy zmieniają się na stronie. Kiedy treść jest dodawana lub usuwana bez animacji, mogą oni przeoczyć nagłe zmiany i być zdezorientowani. Za pomocą animacji można tego uniknąć i pomóc poprzez "ogłoszenie", że coś może zniknąć ze strony lub pojawić się na niej.

Jednym z przykładów dodawania lub usuwania treści jest zarządzanie listą. Większość animacji może być użyta do innych rodzajów treści. Jeśli uznasz je za przydatne lub masz inne pomysły, skontaktuj się z nami, z radością o nich usłyszymy.

Konfigurowanie HTML

Aby rozpocząć, skorzystamy z wstępnie wypełnionej listy i przycisku do dodawania nowych elementów do listy.

<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>

Kilka rzeczy wartych uwagi. Po pierwsze, mamy dwa ID w HTML. Zazwyczaj nie wykorzystujemy ID do stylizacji, ponieważ mogą one powodować problemy z ich specyfiką Jednakże są one przydatne podczas używania JavaScript.

Początkowe elementy posiadają klasę "show", ponieważ tę klasę użyjemy później, aby dodać efekt animacji.

Trochę JavaScript

Na potrzeby wersji demonstracyjnej napiszemy kod JavaScript, aby dodać nowy element do listy, a następnie klasę "show", aby pojawiła się animacja. Istnieje powód wykorzystania tego dwuetapowego procesu. Jeśli elementy listy byłyby dodane w stanie widocznym, nie byłoby czasu na przeprowadzanie przejścia.

Moglibyśmy obejść to aplikując animację na elemencie li, ale to byłoby trudniejsze do zastąpienia podczas usuwania elementów za pomocą innej animacji.

/*
 * 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);
}

Brak animacji

Najprościej możemy napisać kod CSS, aby pokazać elementy listy. Korzystamy z klasy showjako sposobu, aby były widoczne oraz usuwamy klasę show, co powinno spowodować ich zniknięcie.

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;
}

W tych stylach określamy elementy li w taki sposób, aby wyglądały jak prostokąty bez kropek i nadajemy im height 0, margin 0 i ustawiamy overflow na ukryty. W ten sposób pozostaną ukryte dopóki nie zastosujemy klasy show.

Klasa show dotyczy wysokości i marginesu. Ponieważ nie używamy jeszcze animacji, elementy powinny nagle pojawiać się na stronie. Spróbuj również kliknąć elementy listy, aby zobaczyć jak znikają.

Zanikanie

Jako pierwszą animację, dodamy prosty efekt zanikania. Elementy listy pojawiają się bardziej stopniowo niż przedtem. Wizualnie to wciąż wygląda trochę niezdarnie, ale ma tę zaletę, że zwraca uwagę odwiedzających, że coś się dzieje.

Aby dodać efekt, utworzyłem osobny fragment kodu CSS. Aby zastosować go do listy, dodaj klasę fade do kontenera otaczającego twoją listę.

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

Przesuwanie w dół i Zanikanie

Nagły skok za każdym razem, gdy element jest dodawany lub usuwany powoduje mały zgrzyt. Dostosujmy również wysokość, aby stworzyć płynny efekt przesuwania.

Różnica między tym i klasą fade widoczną powyżej jest tylko to, że height: 2em zostało usunięte. Ponieważ klasa show zawiera ustawioną wysokość (dziedziczoną od pierwszego fragmentu CSS), przeniesie ona wysokość automatycznie.

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

Kołysanie

Razem z zanikaniem i przesuwaniem, możemy iść dalej dodając mały efekt 3D. Przeglądarka może przekształcić elementy nie tylko po osi X i Y, użyteczne w przypadku dodawania głębi sceny.

Aby to ustawić, musimy zdefiniować section jako etap, w którym przejścia 3D mają miejsce. Wykonujemy to określając wartość perspective.

Perspektywa w CSS jest głębią sceny. Mała liczna oznacza płytszą perspektywę z bardziej ekstremalnymi kątami. Warto pobawić się wartością, aby znaleźć rezultat, który najbardziej ci odpowiada.

.swing {
  perspective: 100px;
}

Następnie ustawimy elementy li, aby przekształcić w miejscu. Skorzystamy z opacity, aby utworzyć efekt zanikania jak wcześniej, ale dodamy transform, aby obrócić li w miejscu.

.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);
}

W tym przykładzie zaczniemy z li obróconym o 90 stopni przeciwnie do wskazówek zegara. Po dodaniu klasy show, transform jest ustawiona jako none, pozwalając na przejście w miejscu. Aby uzyskać efekt kołysania, skorzystam z funkcji czasowej cubic-bezier.

Kołysanie z boku

Możemy dostosować ten efekt, aby z łatwością stworzyć różne style. Oto przykład, w którym elementy kołyszą się z boku.

Aby stworzyć ten efekt, musimy tylko zmienić oś obrotu.

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

Wszystko co zmieniliśmy to rotateX na rotateY.

Prefiksy i testowanie w przeglądarce

Dla czytelności kod widoczny powyżej nie zawiera żadnych prefiksów  Zalecam dodanie prefiksów, aby umożliwić działanie w przeglądarkach, które wymagają prefiksów -webkit lub innych. Ja korzystam z Autoprefixer, aby nie martwić się o te rzeczy.

Ponieważ te animację znajdują się na górze podstawowego mechanizmu pokaż / ukryj, powinny się pogorszyć z gracją w przeglądarkach, które nie obsługują animacji. Testowanie różnych urządzeń i przeglądarek jest ważne, ale najnowsze przeglądarki powinny być w stanie wyświetlić te animacje.

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