Asimetrik Geçişler için in: ve out:
Öğelere giriş ve çıkış için farklı geçişler belirtin.
Asimetrik Geçişler için in: ve out:, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 3. 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.
Neden Asimetrik
Bazen bir öğeye girerken ve öğeden çıkarken farklı animasyonlar kullanmak istersiniz.
in: Yönergesi
Geçişi yalnızca öğe eklenirken uygulayın.
<p in:fly={{ y: 50 }}>Enter</p>out: Yönergesi
Geçişi yalnızca öğe kaldırılırken uygulayın.
<p out:fade>Leave</p>İkisini Birleştirme
Tamamen özel giriş ve çıkış animasyonları için iki yönergeyi de aynı öğede kullanın.
<p in:fly={{ y: 50 }} out:fade={{ duration: 200 }}>...</p>Farklı İşlevler
Giriş ve çıkış geçişleri tamamen farklı işlevler olabilir (fly ve fade gibi).
Farklı Parametreler
Her yön için farklı süre, gecikme veya yumuşatma gönderebilirsiniz.
#if Bloklarında in: Kullanımı
Normal geçişlerde olduğu gibi öğe tepkisel olarak oluşturulmalı veya kaldırılmalıdır.
transition: ile in:/out: Birlikte Kullanılmamalı
Simetrik geçişler için transition:, asimetrik geçişler için in:/out: seçin. Bunları birlikte kullanmak çakışmalara neden olur.
Gerçek Bir Örnek
Bir bildirim üstten içeri hareket edebilir ve bulunduğu yerde soluklaşarak çıkabilir.
<div in:fly={{ y: -50 }} out:fade>{message}</div>Performans
Her geçiş CPU'ya yük bindirir. Büyük listelerde geçişleri ölçülü kullanın.
Özet Kalıbı
Asimetrik geçişler, kullanıcı arayüzünü hızla iyileştirir: girişler davetkâr, çıkışlar hızlı hissettirir.
Hızlı Denetim
in: ile out: arasındaki fark nedir?
Özet
Girişler için in:, çıkışlar için out: kullanın. Özenli ve asimetrik geçişler için bunları birleştirin.
Sıkça Sorulan Sorular
“Asimetrik Geçişler için in: ve out:” dersi ücretsiz mi?
Evet — “Asimetrik Geçişler için in: ve out:” 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.
“Asimetrik Geçişler için in: ve out:” dersinde ne öğreneceğim?
Öğelere giriş ve çıkış için farklı geçişler belirtin. 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 3. dersidir.
“Asimetrik Geçişler için in: ve out:” 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