Geçişler ve varyantlar
- React kursu
- İleri seviye
- Ders 39/56
- 4 dk
variants ile bileşen durumlarını tanımlamayı öğrenirsin.
Geçişler ve hareket
transition prop'u, animasyonun nasıl gerçekleşeceğini belirler. duration süre, ease eğri, delay gecikme, repeat tekrar sayısıdır.
Örnek: transition={{ duration: 0.5, ease: 'easeOut', delay: 0.2, repeat: Infinity }} 0.5 saniyede, kolay çıkışlı, 0.2 saniye gecikmeli, sonsuz tekrarlı bir animasyon verir.
Hareket için animate={{ x: 100, y: -50 }} x ve y ekseninde kaydırma yapar. Döndürme için rotate: 360 kullanılır.
Modal animasyonu
Bir modal'ın açılıp kapanırken animasyonlu olması, kullanıcı deneyimini iyileştirir. AnimatePresence ile bir bileşen eklendiğinde/çıkarıldığında animasyon yapılır.
<AnimatePresence>{isOpen && <motion.div ... /></AnimatePresence> yapısı, modal açıldığında giriş, kapandığında çıkış animasyonu çalıştırır.
exit prop'u, bileşen DOM'dan çıkmadan önceki durumu tanımlar; bu sayede yumuşak bir kapanış animasyonu olur.
Uygulama Animasyonlu modal yaz
Aşağıdaki iskeleti tamamla. AnimatedModal bileşeni yaz. motion ve AnimatePresence'i 'framer-motion''dan içe aktar. <AnimatePresence> içinde {true && <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }}>Modal</motion.div>} döndür. export default ekle.
Başlangıç kodu
import { motion, AnimatePresence } from 'framer-motion';
// AnimatedModal bileşenini buraya yazÖrnek çözüm
import { motion, AnimatePresence } from 'framer-motion';
function AnimatedModal() {
return (
<AnimatePresence>
{true && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3 }}
>
Modal
</motion.div>
)}
</AnimatePresence>
);
}
export default AnimatedModal;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sonsuz tekrar hangi değerle yapılır?
- 0
- Infinity Doğru cevap
- 1
- true
Açıklama: Infinity sonsuz tekrar yapar.
2 exit prop'u
<motion.div exit={{ opacity: ____ }} /><motion.div exit={{ opacity: 0 }} />Açıklama: exit opacity 0 ile kaybolur.
3 Geçişler ve varyantlar: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
AnimatePresence |
Giriş/çıkış sarar |
exit |
Çıkış durumu |
duration |
Süre |
Infinity |
Sonsuz tekrar |