Hareketli Liste Elemanlari

Web sayfanizin bir bolumu degisecegi zaman, bu degisimi bir animasyon ile yapmak ziyaretcilerinizin sitede neler olup bittigini anlamasini saglamak icin guzel bir yoldur. Animasyonlar yeni gelen içeriği bildirebilir ya da kaldırılmakta olan içeriğe dikkat çekebilir. Bu yazıda, bir liste içindeki ögeleri göstererek ve gizleyerek bunun içeriğin tanıtılmasında nasıl kullanilabileceğine bakacağız.

İçeriği tanıtmak

Animasyonlar, ziyaretçilerin sitenizdeki şeylerin ne zaman değiştiğini anlamasına yardımcı olabilir. İçerikler animasyon kullanılmadan eklendiğinde ya da kaldırıldığında, ziyaretçiler bu ani değişiklikleri gözden kaçırabilir ve akılları karışabilir. Hafif animasyonlar eklemek bu sorunun üstesinden gelebilir ve sayfadan bir şeyin kaldırılacağını ya da ekleneceğini “haber vererek” yardımcı olabilir.

Icerik ekleme veya cikarmayi bir liste ornegi uzerinde gosterebiliriz. Bu animasyonların çoğu başka türlü içerikler için de kullanılabilir. Eğer bu animasyonları yararlı bulduysanız ya da ekleyecek başka fikirleriniz varsa lütfen bizimle iletişime geçin, fikirlerinizi duymaktan mutluluk duyarız.

HTML

Başlarken önceden doldurulmuş olan bir liste, ve listeye yeni ögeler eklemek için de bir buton olusturacagiz.

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

Dikkatinizi çekmek istediğim birkaç şey var. İlki, HTML’de iki adet ID kullandık.  Normalde stil işlemlerinde “fazla spesifik” oldukları ve problem çıkardıkları için ID kullanmayız.  Fakat JavaScript kullanırken işimize yarayacaklar.

İkincisi ise kullandığımız “show” class’ı. Bu class’ı daha sonra animasyon eklerken kullanacağız.

Biraz JavaScript

Bu demo’da listeye yeni ögeler eklemek ve daha sonra animasyonun gerçekleşebilmesi amacıyla “show” class’ını eklemek için biraz JavaScript kullanacağız.  Bunun iki aşamalı olmasının bir sebebi var.  Eğer liste ögeleri görünür halde eklenselerdi, animasyon geçişinin gerçekleşmesi için yeterli zaman olmazdı.

Animasyonları li ögeleri üzerinde gerçekleştirerek bunun üstesinden gelebilirdik fakat bu daha sonra elementleri başka bir animasyonla kaldırmak istediğimizde zorluk çıkarırdı.

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

Animasyonsuz Hal

Biraz CSS yazarak liste ögelerini görünür hale getirebiliriz.  show class’ını kullanarak liste ögelerini görünür yapıyoruz ve aynı mantıkla show class’ını silmemiz liste ögelerinin kaybolmasına neden oluyor.

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

Verdiğimiz bu stiller ile li elementlerinin, önlerinde madde işareti olmadan dikdörtgen bir şekilde görünmesini sağlıyoruz, height ve margin özelliğine 0 veriyoruz ve overflow özelliğini hidden’a ayarlıyoruz.  Bu sayede show class’ı vermediğimiz sürece gizli kalacaklar.

show class’ı elementlere height ve margin verecek. Henüz animasyon kullanmadığımız için ögeler sayfada bir anda belirecekler. Liste ögelerine tıklayıp yokolmalarını izlemeyi de unutmayın.

Fade (Soluklaşma)

Ekleyeceğimiz ilk animasyon basit bir "fade" efekti olacak. Liste ögeleri eskisine göre daha aşamalı olarak belirecekler. Görsel olarak bu hala biraz kullanışsız ama artık kullanıcılar sayfada bir şey olduğunun farkına varmak için daha fazla zamana sahip.

Efekti eklemek için bir CSS parçası daha oluşturdum. Bunu listeye uygulamak için, listeyi saran elemente fade class’ı verin.

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

Slide down (Aşağıya kayma) & Fade

Her yeni öge eklendiğinde oluşan ani zıplama biraz rahatsız edici. Şimdi akıcı bir kayma efekti oluşturmak için height özelliğini de ayarlayalım.

slide-fade class’ı ile fade class’ı arasındaki tek fark height: 2em özelliğinin kaldırılmış olması.  show class’ı (ilk CSS parçasından aldığı) belirlenmiş bir height özelliğine sahip olduğu için height’ı animasyon geçişinde otomatik olarak ayarlayacaktır.

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

Swinging in (Sallanma)

Fade ve slide efektlerinin yanı sıra, 3 boyutlu bir efekt ekleyerek biraz daha ileriye gidebiliriz. Tarayıcıların elementleri değiştirmeleri sadece X ve Y yönleriyle sınırlı değildir, ve boylece derinlik efekti verebiliriz.

Bunu ayarlamak için ul elementini içine alan section‘ı 3 boyutlu değişimler için bir sahne olarak belirlemeliyiz. Bunu, section’a bir perspective değeri vererek yapıyoruz.

Perspective CSS’te animasyon değişimlerinin gerçekleşeceği yerdeki derinliktir.  Düşük bir değer, daha sığ bir derinlik ve daha keskin açılar demektir. Bu değerlerle oynayıp sizin için uygun olanını bulabilirsiniz.

.swing {
  perspective: 100px;
}

Bir sonraki aşama li elementlerinin yerlerine "dönüşerek" gelmelerini ayarlamak.  Daha önceki gibi fade efekti vermek için opacity özelliğini kullanacağız fakat li elementlerinin yerlerine "dönerek" gelmeleri için transform özelliği ekleyeceğiz.

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

Bu örnekte li 90 derece arkaya dönük halde başlıyoruz. show class’ı eklendiğinde transform özelliği none‘a ayarlanıyor ve bu da li elementinin bir geçişle yerine gelmesini sağlıyor. Sallanma efektini vermek için cubic-bezier zamanlama fonksiyonunu kullandım.

Swinging from side (Yandan sallanma)

Yarattigimiz efekti kolayca yeni şekiller elde etmek için duzenleyebiliriz. Aşağıda ögelerin yanlardan sallanarak geldiği bir örnek görebilirsiniz.

Bu efekti sağlamak için sadece dönüşün eksenini değiştirmemiz gerekiyor.

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

Yaptığımız tek değişiklik rotateX yerine rotateY kullanmak oldu.

Ön ekler ve tarayıcı testleri

Yukarıdaki kod anlaşılabilirlik ve okunabilirlik nedeniyle herhangi bir ön ek içermiyor. -webkit ön eki ve başka ön eklere ihtiyacı olan tarayıcıları desteklemek için bu ön ekleri eklemenizi kesinlikle tavsiye ederim. Ben bu gibi şeyler hakkında endişelenmemek için Autoprefixer kullanıyorum.

Bu animasyonlar göster/sakla gibi basit bir mekanizma kullandıkları için animasyonları desteklemeyen tarayıcılarda bir sorun çıkarmayacaktır.  Birçok cihazda ve tarayıcıda bu animasyonların test edilmesi önemli fakat modern tarayıcıların çoğu bu animasyonları destekleyecektir.

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