Düzenlenmiş Animasyonlar için Varyantlar
Adlandırılmış varyant nesneleri tanımlayın ve bunları üst-çocuk bileşen ağaçları boyunca aktarın.
Düzenlenmiş Animasyonlar için Varyantlar, CoddyKit'te ücretsiz bir React 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, 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.
Varyantlar Nedir?
Varyantlar, nesneler olarak tanımlanan adlandırılmış animasyon durumlarıdır. Satır içi değerler yerine bileşenler 'hidden' ve 'visible' gibi varyant adlarına başvurur. Üst bileşenler, alt bileşenleri otomatik olarak düzenleyebilir.
Varyantları Tanımlama
Adlandırılmış durumlara sahip bir variants nesnesi oluşturun. Bunu bir motion bileşenindeki variants özelliğine aktarın.
const cardVariants = {
hidden: { opacity: 0, y: 30 },
visible: { opacity: 1, y: 0 },
};
<motion.div
variants={cardVariants}
initial="hidden"
animate="visible"
transition={{ duration: 0.4 }}
/>Gecikmeli Alt Bileşenler
Alt bileşenleri, aralarında gecikme olacak şekilde birbiri ardına canlandırmak için parent bileşeninin geçişinde staggerChildren kullanın.
const containerVariants = {
hidden: {},
visible: {
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
},
},
};
const itemVariants = {
hidden: { opacity: 0, x: -20 },
visible: { opacity: 1, x: 0 },
};
<motion.ul variants={containerVariants} initial="hidden" animate="visible">
{items.map(item => (
<motion.li key={item.id} variants={itemVariants}>{item.name}</motion.li>
))}
</motion.ul>Varyantların Yayılması
parent bileşeninin varyant durumu değiştiğinde, aynı varyant adını paylaşan tüm child bileşenler de otomatik olarak canlanır — her child bileşene animate aktarmanız gerekmez.
// Children inherit animate="visible" from the parent automatically
const parent = { hidden: {}, visible: { transition: { staggerChildren: 0.05 } } };
const child = { hidden: { opacity: 0 }, visible: { opacity: 1 } };
<motion.div variants={parent} initial="hidden" animate="visible">
<motion.p variants={child}>First</motion.p>
<motion.p variants={child}>Second</motion.p>
<motion.p variants={child}>Third</motion.p>
</motion.div>Durumlar Arasında Geçiş Yapma
Hangi varyantın etkin olduğunu bir durum değişkeniyle denetleyin. Framer Motion, adlandırılmış durumlar arasında sorunsuz geçiş yapar.
const [isOpen, setIsOpen] = useState(false);
const panelVariants = {
closed: { height: 0, opacity: 0 },
open: { height: 'auto', opacity: 1 },
};
<motion.div
variants={panelVariants}
animate={isOpen ? 'open' : 'closed'}
initial="closed"
transition={{ duration: 0.3 }}
/>Varyant Başına Özel Geçiş
Yalnızca belirli bir durumun zamanlamasını özelleştirmek için varyantın içine bir transition anahtarı ekleyin.
const menuVariants = {
closed: {
scaleY: 0,
transition: { duration: 0.2, ease: 'easeIn' },
},
open: {
scaleY: 1,
transition: { duration: 0.3, ease: 'easeOut', staggerChildren: 0.05 },
},
};AnimatePresence ile Çıkış Varyantları
Varyantlar nesnenize bir exit anahtarı ekleyin ve kaldırılma sırasında animasyon uygulamak için bileşeni AnimatePresence ile sarın.
const pageVariants = {
initial: { opacity: 0, x: '100%' },
enter: { opacity: 1, x: 0 },
exit: { opacity: 0, x: '-100%' },
};
<AnimatePresence mode="wait">
<motion.div
key={router.pathname}
variants={pageVariants}
initial="initial"
animate="enter"
exit="exit"
transition={{ duration: 0.3 }}
/>
</AnimatePresence>İç İçe Varyant Geçersiz Kılmaları
Gerektiğinde child bileşenler kendi initial veya animate özellikleriyle devralınan varyant durumunu geçersiz kılarak parent düzenlemesinden ayrılabilir.
Buyruklu Varyant Denetimi için useAnimation
useAnimation() bir animasyon controls nesnesi döndürür. Varyantları programatik olarak tetiklemek için controls.start('variantName') çağrısını yapın.
const controls = useAnimation();
async function sequence() {
await controls.start('wiggle');
await controls.start('bounce');
}
<motion.div animate={controls} variants={{ wiggle: { rotate: 10 }, bounce: { y: -20 } }} />Düzenleme Seçenekleri
staggerChildren seçeneğinin yanı sıra, üst ve alt bileşen animasyonlarını sıralamak için when ('beforeChildren' | 'afterChildren') kullanabilirsiniz.
const container = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
when: 'beforeChildren', // parent fades in before stagger starts
staggerChildren: 0.1,
},
},
};Yeniden Kullanılabilir Varyant Kütüphaneleri
Tutarlı animasyon config'leri sağlamak için varyantları ortak bir file içinde tanımlayın ve gerektiği yerlerde içe aktarın.
// lib/variants.ts
export const fadeIn = { hidden: { opacity: 0 }, visible: { opacity: 1 } };
export const slideUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } };
// Usage:
<motion.div variants={slideUp} initial="hidden" animate="visible" />Kısa Kontrol
Hangi Framer Motion geçiş seçeneği alt bileşen animasyonlarını birbiri ardına geciktirir?
Özet
Varyantlar, nesneler olarak tanımlanan adlandırılmış durumlardır. Animasyonları alt bileşenler arasında otomatik olarak art arda yaymak için parent bileşeninin geçişinde staggerChildren ayarlayın. Buyruklu denetim için useAnimation(), kaldırılma animasyonları için de çıkış varyantlarıyla birlikte AnimatePresence kullanın.
Sıkça Sorulan Sorular
“Düzenlenmiş Animasyonlar için Varyantlar” dersi ücretsiz mi?
Evet — “Düzenlenmiş Animasyonlar için Varyantlar” 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üzenlenmiş Animasyonlar için Varyantlar” dersinde ne öğreneceğim?
Adlandırılmış varyant nesneleri tanımlayın ve bunları üst-çocuk bileşen ağaçları boyunca aktarı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 2. dersidir.
“Düzenlenmiş Animasyonlar için Varyantlar” 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