İçindekiler
Geçişler, içine dahil edilen yeni bir dizi efekte aittir. HTML5 ve bu ile ayarlanabilir CSS3Önceden, bu tür efektlerin Javascript tarafından mevcut birçok kitaplık ve çerçeveden biri (Mootools, Jquery, vb.) . . .geçişleri kullanma
Bir geçişin nasıl kullanılacağını görmeden önce, onun ne olduğunu bilmeliyiz. Özellik ile bir değişiklik uyguladığımızda biliyoruz : üzerine gelin fareyi öğenin üzerine getirdiğinizde, fare üzerine geldiğinde atanan stili hemen alır, bir geçiş, bu değişikliğin nasıl yapılacağı, yani değişikliğin süresi, hızı üzerindeki kontrolden başka bir şey değildir. eski ve yeni durum arasında bir karışım gibi bir etki elde etmek için gerçekleştirilecektir.
O halde geçişin HTML belgesi içinde bir durumdan diğerine geçiş olduğunu ve bu değişikliğin yapılabileceği tüm özellikleri özetleyebiliriz, aşağıdaki görüntüde bir başlangıç ve bir son durum görüyoruz, geçiş ne oluyor? İkisi arasında.
BÜYÜTGeçiş özellikleri
Geçiş yapmak için kullanabileceğimiz özellikleri ve nitelikleri görelim:
- geçiş gecikmesi: Efekt uygulamasının başlayacağı zaman birimi cinsinden bir gecikmeyi belirtir.
- geçiş süresi: Geçişin gerçekleşeceği zamanı belirtir.
- geçiş özelliği: Geçişin hangi özelliğe uygulanacağını belirtir.
- geçiş-zamanlama-fonksiyonu: Geçişin yürütülmesi sırasında ara değerlerin nasıl ele alınacağını belirtir.
- geçiş: Tek bir CSS bildiriminde geçişin tüm özelliklerini uygulayabileceğimiz kısayoldur. Şu şekilde özetlenebilir: geçiş:
Bir öğe için nasıl geçiş yapılacağına dair bir örnek görelim. HTML5, aşağıdaki kodu görelim:
ÖrnekPek çok farklı meyve türü vardır - tek başına 500'den fazla muz çeşidi vardır. Sayısız elma, portakal ve diğer bilinen meyveleri eklediğimizde binlerce seçenekle karşı karşıyayız.
Gördüğümüz gibi, öneki kullanarak geçiş öğesinin farklı özelliklerini uyguladık. -webkit, bu bize tarayıcılar için yerine getirileceğini garanti eder Krom Y Safari, bunları uygulamak için Firefox Y Opera -moz ve -o öneklerini de eklemeliyiz.
ayarladığımızı da fark edebiliriz. gecikme 100ms'de bu, geçişe başlamadan önce küçük bir gecikme olacağı anlamına gelir, o zaman etkinin tüm süresi 500ms sürmeli, bu da süre.
Efektin tüm aşamalarını içeren bir resim görelim:
BÜYÜTGördüğümüz gibi geçiş, belirtilen süre boyunca efektin kademeli olarak uygulanmasını sağlar.
Bununla, bir öğeye geçiş efektinin nasıl uygulanacağına dair öğreticiyi bitiriyoruz. HTML5, belgelerimizin ve sayfalarımızın daha fazla dinamizm kazanması için gerekli kodu yerleştirmek doğal hale gelene kadar uygulamaya devam etmeliyiz.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
