Özet - Framer Motion

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.

Örnek çözümü göster

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;

Kendini test et

Bu grupta işlenmeyen konu?
- motion bileşeni
- varyantlar
- AnimatePresence
- useTransition hook
Cevabı göster

useTransition hook — useTransition hook bu grupta işlenmedi.

AnimatePresence kullanımı

<____>{isOpen && <motion.div />}</AnimatePresence>

Cevabı göster

<AnimatePresence>{isOpen && <motion.div />}</AnimatePresence>

Sıradaki ders: Erişilebilirlik temelleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler