Yazılım.
CevapSitesi.com Beta!
Çözüm Noktası
Facebook, Twitter, Google+ veya e-posta ile paylaşın.
| Sorular | Makaleler | Üyeler | Etiketler  | İletişim
Soru sormak ya da cevap vermek için;
giriş yapın veya üye olun.

Sosyal medya hesaplarınızla da giriş yapabilirsiniz.

Yazılım Makaleleri

0

CSS3 Geçiş Efektleri (Transitions)

CSS3 geçiş efektleri, bir stil özelliği değerinden aynı stil özelliğinin başka bir değerine verilen süre içinde geçiş yapar. Bu şekilde bir animasyon oluşturur.

Geçiş efektlerini CSS3 animasyonlarıyla karıştırmayın. Animasyonlarda anahtar kareler verilerek farklı bir çok durum arasında daha kolay geçişler yapabilirsiniz. CSS3 animasyonları hakkında bilgi almak için CSS3 Animasyonları yazımı okuyabilirsiniz.

Örneğin genişlik özelliği için bir geçiş animasyonu tanımlanmış ve genişliği 100 piksel olan bu etiketin genişliği 300 piksel yapılırsa, genişliğin değiştirilmesi işlemi geçiş animasyonu gösterilerek yapılır. Yani etiket verilen süre boyunca bir büyüme animasyonu gerçekleştirir.

Animasyon ve geçiş efektlerinde kullanmak üzere mutlaka CSS dönüşümlerini (transforms) öğrenin. Bu konuda yazmayı düşündüğüm makaleyi tamamladığımda adresini burada bildireceğim.

Geçiş efektleri için şu stil özellikleri kullanılır:
  • transition
  • transition-property : Geçiş için kullanılacak stil özelliği adı.
  • transition-duration : Geçiş efektinin süresi.
  • transition-delay : Geçiş efektine başlamadan önceki bekleme süresi.
  • transition-timing-function : Geçiş efektinin bir eğriye göre hareket şekli.

transition-property özelliği, etiketin değiştiğinde geçiş animasyonu için kullanılacak olan stil özelleğini belirtir.

Örnek:

transition-property: width;
Örnekte width (genişlik) özelliği değiştiğinde geçiş animasyonu yapılacağı belirtilmiştir.

transition-duration özelliği, geçiş animasyonunun süresini belirtir. Saniye veya milisaniye cinsinden verilebilir. Örneğin 3s veya 400ms.

Örnek:
transition-duration: 3s;
Şimdi ikisinin beraber kullanıldığı bir örnek verelim.

Bu örnek, genişliği 100 piksel olan bir etiketin genişliği değiştiğinde, geçişin geçiş efekti ile yapılmasını sağlar. Burada şuna dikkat etmelisiniz. Genişlik özelliği değişmeden animasyon da gerçekleşmez. Bu değişimi JavaScript kullanarak yapabilirsiniz. Ancak biz sadelik için etiketin genişlik özelliğini :hover  seçicisi ile değiştireceğiz. :hover  seçicisi, fare etiketin üzerine geldiğinde kullanılacak olan stili tanımlar.

    <style>
.sGecisliStil {
background-color: blue;
height: 50px;
width: 50px;
transition-property:width;
transition-duration:1s;
}

/*sGecisliStil stil sınıfına sahip etiketin üzerine fare geldiğinde...*/
.sGecisliStil:hover {
width: 300px;
}
</style>
<div class="sGecisliStil"></div>
Örneğin çalışan hali:




Örneğin çalışmasından da görüleceği gibi fare kutunun üzerine geldiğinde :hover  seçicisi kullanıldığı için (bu stil uygulandığından) genişlik özelliği değişmiş ve tanımlanan geçiş efekti çalıştırılmıştır. Fareyi kutunun üzerinden çektiğinizde ise :hover seçicisi iptal olduğundan (:hover ile tanımlanan stil kaldırıldığından) kutunun genişliği tekrar değişmiş (100 piksel olmuş) ve geçiş animasyonu tekrar çalıştırılmıştır.

 transition-delay özelliği, geçiş animasyonu çalıştırılmadan önce bir bekleme süresi belirtir.

Örnek:

    <style>
.sGecisliStil {
background-color: blue;
height: 50px;
width: 50px;
transition-property:width;
transition-duration:1s;
}

/*sGecisliStil stil sınıfına sahip etiketin üzerine fare geldiğinde...*/
.sGecisliStil:hover {
width: 300px;
}
</style>
<div class="sGecisliStil"></div>
Örneğin çalışan hali:



transition-timing-function özelliği, animasyonun yavaş başlayıp hızlanması veya tersi gibi durumları belirtmek için kullanılır. Alabileceği değerler şunlardır:

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier

Aşağıdaki çalışan örnek bu durumları kullandığımızda nasıl sonuçlar alacağımızı göstermektedir. cubic-beizer değeri altta ayrıca açıklanacaktır.





cubic-bezier değeri, bir bezier eğrisi ile efektin akış şeklini belirlemek için kullanılır. Tanımlanan eğrideki dik bölümler efektin hızlı ilerleyeceği, yatık bölümler ise yavaş ilerleyeceği süreleri belirler. Eğrideki değerler 0 ile 1 arasında değerler (yüzde) olarak verilir.

Bezier eğrisi ile ilgili olarak Canvas ile eğriler çizmek başlıklı makalemizi okuyabilir, makalenin sonundaki etkileşimli örnekten yararlanabilirsiniz.

Şu etkileşimli örnek üzerinde cubic-bezier değerleri oluşturabilir ve test edebilirsiniz. Örnekte elde edebileceğiniz negatif değerler bazı webkit tarayıcılarında çalışmayabilir.




animation özelliği, üstteki tüm özelliklerin değerlerini tek bir satırda tanımlamanıza imkan veren bir kısa yazım şekli sunar. Özellik değerlerini aşağıdaki sırayla ve aralarına birer boşluk vererek belirtiriz.

Kullanımı şöyledir:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
Üstteki örneğin transition özelliği ile tanımlanmış hali şöyledir:

    <style>

.sGecisliStil {
background-color: blue;
height: 50px;
width: 50px;
transition: width 1s 1s;
}

/*sGecisliStil stil sınıfına sahip etiketin üzerine fare geldiğinde...*/
.sGecisliStil:hover {
width: 300px;
}

</style>

<div class="sGecisliStil"></div>

Görüldüğü gibi tüm özellikleri kullanmadık. Hepsini yazmak zorunda değiliz. Kullanımda transition-duration özelliğinin sırası transition-delay'den önce olduğu için ilk 1s, transition-duration olarak kullanılacakıtır.

Çoklu Geçiş Tanımlama

Geçiş efektleri, sadece bir özellik üzerinden olmak zorunda değildir. Çoklu özellikler veya tüm özellikler için de geçiş tanımlanabilir.

Eğer tüm özellikler için geçiş tanımlamak istiyorsanız transition-property özelliğine all değerini verin.

Örnek:

    <style>

.sGecisliStil {
background-color: blue;
height: 50px;
width: 50px;
background-color:blue;
transition:all 1s;
}

/*sGecisliStil stil sınıfına sahip etiketin üzerine fare geldiğinde...*/
.sGecisliStil:hover {
width: 100px;
background-color:red;

}

</style>

<div class="sGecisliStil"></div>
Örneğin çalışan hali:



Görüldüğü gibi :hover seçicisinde hem genişlik, hem de zemin rengi değiştirildiğinden her ikisi için de geçiş animasyonu görüntülenmiştir. Bu arada height özelliği değiştirilmediğinden animasyona dahil edilmemiştir.

Tüm özelliklerin animasyona dahil edilmesini istemiyorsanız, özellikleri ayrı ayrı belirtebilirsiniz. Bunu iki şekilde bildirebilirsiniz. Birinci şekilde transition özelliğinin değeri olarak geçiş animasyonlarını aralarına birer virgül koyarak belirtebilirsiniz.
    <style>

.sGecisliStil {
background-color: blue;
height: 50px;
width: 50px;
background-color: blue;
transition: height 1s, background-color 2s;
}

/*sGecisliStil stil sınıfına sahip etiketin üzerine fare geldiğinde...*/
.sGecisliStil:hover {
width: 100px;
background-color:red;
}

</style>

<div class="sGecisliStil"></div>

İkinci şekilde ise transition özelliklerini ayrı ayrı kullanıp, her bir özellik değerini değiştirilecek stil özelliğinin sırasına göre aralarına birer boşluk vererek belirtebilirsiniz.
    <style>

.sGecisliStil {
background-color: blue;
height: 50px;
width: 50px;
background-color:blue;
transition-property: height background-color;
transition-duration: 1s 2s;

}

/*sGecisliStil stil sınıfına sahip etiketin üzerine fare geldiğinde...*/
.sGecisliStil:hover {
width: 100px;
background-color:red;
}

</style>

<div class="sGecisliStil"></div>

Her iki örnekte de height için 1 saniye süreli ve background-color için 2 saniye süreli geçiş animasyonları tanımlanmaktadır.

Efektin sona erme olayı - ontransitionend


ontransitionend olayını karşılayacak bir fonksiyon bildirerek geçiş efekti sona erdiğinde eylem gerçekleştirebiliriz.

ontranisitonend olayını, bazı webkit tarayıcılarda webkitTransitionEnd olarak bildirmeniz gerekebilir.

JavaScript ile bir olay geçekleştiğinde  çalıştırılacak bir fonksiyon belirtmek için, addEventListener yöntemi kullanılır. Olay, geçiş efekti kullanacak olan etikete atanır.

Fonksiyonu doğrudan olaya atayabilirsiniz ancak aynı olay için çoklu fonksiyon atamaya izin verdiğinden biz burada addEventListener'i tercih edeceğiz.

transitionend olayında olayı karşılayan fonksiyona gönderilen event parametresi ile işimize yarayacak üç bilgiyi de alırız. Bunlar:
  • target : Geçiş efekti çalıştırılan etiketin referansı.
  • propertyName : Geçiş efekti için kullanılan stil özelliğinin adı
  • elapsedTime : Efektin tamamlanma süresi.

Örnek:
    <style>

.sGecisliStil {
background-color:blue;
height:50px;
width: 50px;
transition:width 1s;
}

.sGecisliStil:hover {
width: 100px;
}

</style>

<div id="dvGecisliStilKullananDiv" class="sGecisliStil"></div>
<div id="dvMesaj"></div>
<br />
Geçiş efektini tetiklemek için fareyi mavi kutunun üzerine getirin ve geri çekin.

<script>

function efektTamamlandi() {
document.getElementById("dvMesaj").innerHTML += "Geçiş efekti tamamlandı.<br />";
}

var el = document.getElementById("dvGecisliStilKullananDiv");

// Olayları karşılayacak fonksiyonları addEventListener ile bildirirken, olay
// adını başında on olmadan yazarız (ontransitionend -> transitionend)

// dvGecisliStilKullananDiv id değerine sahip etiketin geçiş animasyonu
// tamamlandığında efektTamamlandi isimli fonksiyonu çalıştır.

el.addEventListener("transitionend", efektTamamlandi);


</script>
Örneğin çalışan hali:



Aynı örneği event parametresi ile beraber verelim. event parametresinin getirdiği değerleri de kullanan örnek:

    <style>

.sGecisliStil {
background-color:blue;
height:50px;
width: 50px;
transition:width 1s;
}

.sGecisliStil:hover {
width: 100px;
}

</style>

<div id="dvGecisliStilKullananDiv" class="sGecisliStil"></div>
Geçiş efektini tetiklemek için fareyi mavi kutunun üzerine getirin ve geri çekin.

<script>

function efektTamamlandi(event) {
var el =
document.getElementById("dvMesaj");
  el.innerHTML += event.propertyName +
" geçiş efekti " +
event.elapsedTime +
" saniyede tamamlandı.<br />";
}

var el = document.getElementById("dvGecisliStilKullananDiv");

el.addEventListener("transitionend", efektTamamlandi);


</script>

Örneğin çalışan bir şekli:



Efekt tamamlanmadan fareyi kutunun üzerinden çeker ve efekti bitirirseniz süre 1 saniyeden daha kısa görüntülenecektir.

ontransitioncanceled ve ontransitionstart Olayları:

Bu olaylar adlarından da anlaşılabileceği gibi, efekt iptal edildiğinde ve efekt başladığında çalıştırılırlar. Gönderdikleri event parametresinin kullanabileceğiniz özellikleri ontransitionend ile aynıdır. Ancak henüz tam bir tarayıcı desteğine sahip olmadıklarından, kullanmadan önce farklı tarayıcılarda test etmelisiniz.

Geçiş efektlerinde kullanılabilecek CSS stil özellikleri:

Geçiş efektlerinde tüm stil özellikleri kullanılamaz. Kullanılabilecek stil özelliklerinin listesi için şuraya bakabilirsiniz.

Bu kadar. Lütfen hata veya eksik görürseniz bildirin.


Yazan: 09.05.16 01:38

101,387p 4ü