motion bileşeni

motion.div gibi bileşenlerle animasyon yapmayı öğrenirsin.

Varyantlar nedir?

Varyantlar, animasyon durumlarını adlandırılmış nesneler olarak tanımlamaya yarar. variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }} ile 'hidden' ve 'visible' durumlarını tanımlarsın.

initial="hidden" ve animate="visible" ile bu durumları çağırırsın. Bu, kod tekrarını azaltır ve animasyonları yeniden kullanılabilir yapar.

Varyantlar, alt bileşenlere otomatik yayılır; bu sayede bir parent'ı değiştirdiğinde tüm çocuklar senkronize animasyon yapar.

Varyant kullanımı

Bir varyant nesnesi tanımlar, sonra motion.div'e variants prop'u ile verirsin. initial="hidden" ve animate="visible" ile durumları çağırırsın.

Bu yöntem, özellikle birden çok bileşenin aynı animasyonu paylaşması gerektiğinde kullanışlıdır. Tek bir nesne tanımlar, her yerde kullanırsın.

Varyantlar, transition'ı da içerebilir; bu sayede her durum kendi süre ve eğrisini tanımlar.

Uygulama Varyantlı animasyon yaz

Aşağıdaki iskeleti tamamla. const variants = { hidden: { opacity: 0 }, visible: { opacity: 1 } }; tanımla. VariantBox bileşeni yaz; <motion.div variants={variants} initial="hidden" animate="visible" transition={{ duration: 0.4 }}>Kutu</motion.div> döndür. motion'u 'framer-motion''dan içe aktar. export default ekle.

Örnek çözümü göster

import { motion } from 'framer-motion';

const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 },
};

function VariantBox() {
  return (
    <motion.div
      variants={variants}
      initial="hidden"
      animate="visible"
      transition={{ duration: 0.4 }}
    >
      Kutu
    </motion.div>
  );
}

export default VariantBox;

Kendini test et

Varyantlar neyi sağlar?
- Daha hızlı CSS
- Daha az dosya
- Adlandırılmış durumlar
- Daha kısa import
Cevabı göster

Adlandırılmış durumlar — Varyantlar adlandırılmış durumlar sağlar.

varyant çağrısı

<motion.div variants={variants} initial="____" animate="visible">

Cevabı göster

<motion.div variants={variants} initial="hidden" animate="visible">

motion bileşeni: kavramları eşleştir

variants

Durum nesnesi
hidden

Gizli durum
visible

Görünür durum
transition

Süre

Sıradaki ders: Geçişler ve varyantlar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler