Özel Geçiş İşlevi Yazma
DOM'a giriş ve DOM'dan çıkışı canlandırmak için özel bir geçişten CSS veya tick işlevleri döndürün.
Özel Geçiş İşlevi Yazma, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.
Özel geçişler
Yerleşik geçişlerin yanı sıra tamamen özel geçiş işlevleri de yazabilirsiniz.
İşlev imzası
Bir geçiş işlevi (node, params) alır ve bir seçenekler nesnesi döndürür.
function spin(node) {
return {
duration: 600,
css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t};`
};
}Geçişinizi kullanma
Herhangi bir öğeye transition:spin uygulayarak kullanın.
CSS işlevi
Bir css(t, u) işlevi döndürün. t 0'dan 1'e, u ise 1'den 0'a gider.
JS işlevi (kare güncellemesi)
CSS ile canlandırılamayan değerler için bunun yerine bir tick işlevi döndürün.
tick: (t) => node.textContent = Math.floor(t * 100) + "%";CSS ne zaman, kare güncellemesi ne zaman kullanılmalı
CSS daha hızlıdır (GPU hızlandırmalıdır). Değişikliği CSS ile ifade edemediğiniz durumlarda yalnızca kare güncelleme işlevini kullanın.
Yumuşatma
Yumuşatmayı işlevinizin içinde uygulayın veya parametre olarak kabul edin.
Gecikme ve süre
Seçenekler nesnesinde delay ve duration döndürün.
Yeniden kullanılabilir kitaplık
Tasarım sisteminiz için bir geçişler modülü oluşturun.
Yön farkındalığı
Çerçeve, giriş sırasında işlevinizi çağırır; çıkış sırasında ise bunun tersi yönde bir hareket kullanılır.
in/out ile birleştirme
in: ve out: aracılığıyla giriş için bir, çıkış için başka bir özel işlev kullanabilirsiniz.
Hızlı kontrol
Bir geçişteki CSS işlevi ne alır?
Özet
Bir işlevden { duration, css } veya { duration, tick } döndürerek özel geçişler tanımlayın.
Sıkça Sorulan Sorular
“Özel Geçiş İşlevi Yazma” dersi ücretsiz mi?
Evet — “Özel Geçiş İşlevi Yazma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.
“Özel Geçiş İşlevi Yazma” dersinde ne öğreneceğim?
DOM'a giriş ve DOM'dan çıkışı canlandırmak için özel bir geçişten CSS veya tick işlevleri döndürün. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Özel Geçiş İşlevi Yazma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Özel Geçiş İşlevi Yazma
- Geçiş Parametreleri: node duration delay
- Şekil Değiştiren Geçiş Oluşturma
- CSS ve JS Geçişleri