transition:fade ve transition:fly
{#if} tarafından denetlenen öğelere yerleşik fade ve fly geçişlerini uygulayın.
transition:fade ve transition:fly, 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.
Yerleşik Geçişler
Svelte, svelte/transition içinde birkaç geçiş sunar: fade, fly, slide, scale, blur ve draw.
Geçişi İçeri Aktarma
İhtiyacınız olanları içeri aktarın.
import { fade, fly } from "svelte/transition";transition: ile Uygulama
{#if} tarafından denetlenen bir öğeye transition: ekleyerek geçişi uygulayın.
{#if visible}
<p transition:fade>Hello</p>
{/if}Fly Geçişi
Fly geçişi, öğeleri bir koordinat ofsetinden konumlarına taşır.
{#if visible}
<div transition:fly={{ x: -200, duration: 400 }}>Slide in</div>
{/if}Parametreler Nesnesi
x, y, duration, delay ve easing gibi seçenekleri gönderin.
Tetikleyiciler Ne Zaman Çalışır
Geçişler, {#if}, {#each} veya {#await} bloklarının içindeki öğe oluşturulurken ve kaldırılırken çalışır.
Geçişleri Birleştirme
Her yönerge için bir geçiş uygulayın. Asimetrik geçişler için in: ve out: kullanın.
Akıcı Kullanıcı Deneyimi
Geçişler, anahtar kareleri elle yazmadan kullanıcı arayüzünün özenli görünmesini sağlar.
Performans
Yerleşik geçişler, mümkün olduğunda GPU hızlandırması için CSS kullanır.
Hareketi Azaltma
Geçişleri koşullu olarak uygulayarak prefers-reduced-motion ayarına uyun.
Yumuşatma
Daha gösterişli hareketler için svelte/easing içinden bir yumuşatma işlevi gönderin.
import { cubicOut } from "svelte/easing";
<p transition:fade={{ easing: cubicOut }}>...</p>Hızlı Denetim
Geçişler nerede çalışır?
Özet
svelte/transition içinden içeri aktarın; transition: ile ekleyin; denetim için parametre nesneleri gönderin.
Sıkça Sorulan Sorular
“transition:fade ve transition:fly” dersi ücretsiz mi?
Evet — “transition:fade ve transition:fly” 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.
“transition:fade ve transition:fly” dersinde ne öğreneceğim?
{#if} tarafından denetlenen öğelere yerleşik fade ve fly geçişlerini uygulayı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.
“transition:fade ve transition:fly” 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