Özet - Framer Motion
- React kursu
- İleri seviye
- Ders 40/56
- 5 dk
Bir modal'ın açılıp kapanırken animasyonlu olmasını sağlarsın.
Özet - Framer Motion
Bu grupta Framer Motion'ın ne olduğunu, motion bileşenlerini ve varyantları öğrendin. Şimdi bunları birleştirme zamanı.
Tipik akış: motion.div ile animasyonlu bir bileşen yaz, initial ve animate ile durumları tanımla, AnimatePresence ile giriş/çıkış animasyonu ekle.
Bir sonraki adımda açılıp kapanırken animasyonlu bir modal yazacaksın.
Uygulama Modal aç/kapa animasyonu
Aşağıdaki iskeleti tamamla. ModalSummary bileşeni yaz. useState ile isOpen (false) tut. <button onClick={() => setIsOpen(true)}>Aç</button> koy. <AnimatePresence> içinde {isOpen && <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>İçerik<button onClick={() => setIsOpen(false)}>Kapat</button></motion.div>}. motion ve AnimatePresence'i içe aktar. export default ekle.
Başlangıç kodu
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
// ModalSummary bileşenini buraya yazÖrnek çözüm
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
function ModalSummary() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={() => setIsOpen(true)}>Aç</button>
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
İçerik
<button onClick={() => setIsOpen(false)}>Kapat</button>
</motion.div>
)}
</AnimatePresence>
</div>
);
}
export default ModalSummary;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bu grupta işlenmeyen konu?
- motion bileşeni
- varyantlar
- AnimatePresence
- useTransition hook Doğru cevap
Açıklama: useTransition hook bu grupta işlenmedi.
2 AnimatePresence kullanımı
<____>{isOpen && <motion.div />}</AnimatePresence><AnimatePresence>{isOpen && <motion.div />}</AnimatePresence>Açıklama: AnimatePresence giriş/çıkış sarar.