Düzen Animasyonları ve AnimatePresence
Düzen değişikliklerini layout prop'uyla otomatik olarak canlandırın; AnimatePresence ile bileşenleri bağlayın ve kaldırın.
Düzen Animasyonları ve AnimatePresence, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 4. 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.
Yerleşim Animasyonları
Bir motion bileşenine layout özelliğini eklediğinizde Framer Motion, durum veya DOM değişikliklerinin neden olduğu tüm yerleşim değişikliklerine (boyut, konum) otomatik olarak animasyon uygular — elle konumlandırma gerekmez.
<motion.div layout style={{ width: isExpanded ? 300 : 150 }}>
{/* Width animates smoothly when isExpanded changes */}
</motion.div>layout Özelliği Değerleri
layout özelliği, canlandırılanları sınırlamak için true (tüm yerleşim), 'position' (yalnızca konum) veya 'size' (yalnızca boyut) değerlerini kabul eder.
<motion.div layout="position"> {/* only x/y positions animate */}
<motion.div layout="size"> {/* only width/height animate */}Paylaşılan Öğe Geçişleri için layoutId
İki öğeye aynı layoutId değerini verin; Framer Motion, farklı bileşenlerde olsalar bile bunlar aynı öğeymiş gibi aralarında animasyon uygular.
// Thumbnail in list:
<motion.img layoutId={`photo-${id}`} src={src} className="thumbnail" />
// Full-screen view:
<motion.img layoutId={`photo-${id}`} src={src} className="fullscreen" />
// Framer Motion morphs one into the other automaticallyAnimatePresence
AnimatePresence, exit animasyonlarını etkinleştirir. Bu olmadan kaldırılan bileşenler anında kaybolur. Kaldırılma animasyonları uygulamak için koşullu oluşturmayı bununla sarın.
import { AnimatePresence, motion } from 'framer-motion';
<AnimatePresence>
{isVisible && (
<motion.div
key="notification"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
/>
)}
</AnimatePresence>key Özelliği Gereklidir
AnimatePresence, her child bileşenin kararlı bir key değerine sahip olmasını gerektirir. Benzersiz bir anahtar olmadan React, öğelerin ne zaman kaldırıldığını ve ne zaman güncellendiğini algılayamaz.
// Animating between pages:
<AnimatePresence mode="wait">
<motion.div key={pathname} ... />
</AnimatePresence>AnimatePresence modu
mode, çıkan ve gelen öğelerin nasıl üst üste bineceğini denetler. 'wait', çıkış tamamlanana kadar giriş animasyonunu geciktirir. 'sync' (varsayılan) her ikisini aynı anda çalıştırır.
// Page transitions — wait for old page to exit:
<AnimatePresence mode="wait">
<motion.main key={pathname} ... />
</AnimatePresence>
// Toast stack — new toasts appear while old ones exit:
<AnimatePresence mode="sync">
{toasts.map(t => <motion.div key={t.id} ... />)}
</AnimatePresence>Yerleşimle Listelere Animasyon Uygulama
Liste öğelerinin yeniden sıralanmasına ve kaldırılmasına animasyon uygulamak için layout ile AnimatePresence özelliklerini birleştirin.
<motion.ul>
<AnimatePresence>
{items.map(item => (
<motion.li
key={item.id}
layout
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
>
{item.name}
</motion.li>
))}
</AnimatePresence>
</motion.ul>LayoutGroup
LayoutGroup, birden çok bağımsız motion bileşenindeki yerleşim animasyonlarını koordine ederek bunların tek bir grup gibi birlikte canlanmasını sağlar.
import { LayoutGroup } from 'framer-motion';
<LayoutGroup>
<Sidebar />
<MainContent />
{/* Both animate layout changes together */}
</LayoutGroup>Yerleşim Bozulmasını Düzeltme
Yerleşim animasyonları kenarlıkları, gölgeleri ve kenar yarıçapını bozabilir. Görsel kusurları düzeltmek için layoutDependency özelliğini veya CSS ölçek düzeltmesini kullanın.
<motion.div
layout
style={{ borderRadius: 12 }}
// Framer Motion auto-corrects border-radius during scale changes
/>Paylaşılan Eksen Geçiş Kalıbı
Sihirbaz adımları veya sekmeler için, ekranlar arasında anlamlı bir uzamsal ilişki oluşturmak üzere X konumuna yöne dayalı animasyon uygulayın.
const variants = {
enter: (dir: number) => ({ x: dir > 0 ? '100%' : '-100%', opacity: 0 }),
center: { x: 0, opacity: 1 },
exit: (dir: number) => ({ x: dir < 0 ? '100%' : '-100%', opacity: 0 }),
};
<AnimatePresence custom={direction} mode="wait">
<motion.div
key={step}
custom={direction}
variants={variants}
initial="enter"
animate="center"
exit="exit"
/>
</AnimatePresence>Hızlı Kontrol
Giriş animasyonunu, çıkış animasyonu tamamlanana kadar hangi AnimatePresence modu geciktirir?
Özet
layout, boyut ve konum değişikliklerini otomatik olarak canlandırır. layoutId, ağaç genelinde iki öğe arasında biçim dönüşümü yapar. AnimatePresence, çıkış animasyonlarını etkinleştirir — alt öğelere her zaman kararlı key özellikleri verin ve sayfa geçişleri için mode='wait' seçin.
Sıkça Sorulan Sorular
“Düzen Animasyonları ve AnimatePresence” dersi ücretsiz mi?
Evet — “Düzen Animasyonları ve AnimatePresence” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.
“Düzen Animasyonları ve AnimatePresence” dersinde ne öğreneceğim?
Düzen değişikliklerini layout prop'uyla otomatik olarak canlandırın; AnimatePresence ile bileşenleri bağlayın ve kaldırın. React 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.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React 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 4. dersidir.
“Düzen Animasyonları ve AnimatePresence” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React 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
- Hareket Bileşenleri ve Temel Animasyonlar
- Düzenlenmiş Animasyonlar için Varyantlar
- Hareket Animasyonları: Üzerine Gelme, Dokunma ve Sürükleme
- Düzen Animasyonları ve AnimatePresence