Geçiş Parametreleri: duration delay easing
duration, delay ve easing parametrelerini geçirerek geçişleri özelleştirin.
Geçiş Parametreleri: duration delay easing, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 2. 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.
Parametre Nesnesi
Tüm geçişler, ikinci bağımsız değişken olarak bir seçenekler nesnesi kabul eder.
<p transition:fade={{ duration: 600, delay: 200 }}>Süre
Animasyonun milisaniye cinsinden toplam uzunluğudur. Varsayılan değer 400 milisaniyedir.
Gecikme
Animasyon başlamadan önce bekleme süresidir. Sıralı kullanıcı arayüzü işlemleri için kullanışlıdır.
Yumuşatma
Doğrusal ilerlemeyi (0..1) özel bir eğriye eşleyen işlevdir. Varsayılan olarak doğrusaldır.
Yerleşik Yumuşatma İşlevleri
svelte/easing içinden içeri aktarın: linear, quadIn, cubicOut, elasticOut ve diğerleri.
import { elasticOut } from "svelte/easing";Geçişe Özel Seçenekler
Her geçişin kendine ait parametreleri vardır. Fly, x ve y ekler; scale ise start ekler.
Süreleri Seçme
Mikro etkileşimler için kısa süreler (100-200 ms), sayfa geçişleri için daha uzun süreler (400-700 ms) kullanın.
Tepkisel Parametreler
Parametre değerleri tepkisel duruma bağlı olabilir.
<p transition:fly={{ x: dir * 200 }}>...Varsayılan Davranış
Parametre nesnesini atlarsanız makul varsayılanlar uygulanır.
Tasarımla Eşleştirme
Hareket doğru hissettirene kadar süreyi ve yumuşatmayı ayarlayın; gerçek bir cihazda deneyin.
Erişilebilirlik
Süreyi azaltarak veya geçişleri atlayarak prefers-reduced-motion ayarına uyun.
Hızlı Denetim
Yumuşatma işlevleri nereden gelir?
Özet
Doğru hissi yakalamak için svelte/easing içindeki duration, delay ve easing değerlerini ayarlayın.
Sıkça Sorulan Sorular
“Geçiş Parametreleri: duration delay easing” dersi ücretsiz mi?
Evet — “Geçiş Parametreleri: duration delay easing” 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.
“Geçiş Parametreleri: duration delay easing” dersinde ne öğreneceğim?
duration, delay ve easing parametrelerini geçirerek geçişleri özelleştirin. 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 2. dersidir.
“Geçiş Parametreleri: duration delay easing” 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
- transition:fade ve transition:fly
- Geçiş Parametreleri: duration delay easing
- Asimetrik Geçişler için in: ve out:
- SVG Yolları için transition:draw