Geçişler ve varyantlar

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.

Örnek çözümü göster

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;

Kendini test et

Sonsuz tekrar hangi değerle yapılır?
- 0
- Infinity
- 1
- true
Cevabı göster

Infinity — Infinity sonsuz tekrar yapar.

exit prop'u

<motion.div exit={{ opacity: ____ }} />

Cevabı göster

<motion.div exit={{ opacity: 0 }} />

Geçişler ve varyantlar: kavramları eşleştir

AnimatePresence

Giriş/çıkış sarar
exit

Çıkış durumu
duration

Süre
Infinity

Sonsuz tekrar

Sıradaki ders: Özet - Framer Motion

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler