motion bileşeni
- React kursu
- İleri seviye
- Ders 38/56
- 4 dk
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.
Başlangıç kodu
import { motion } from 'framer-motion';
// VariantBox bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Varyantlar neyi sağlar?
- Daha hızlı CSS
- Daha az dosya
- Adlandırılmış durumlar Doğru cevap
- Daha kısa import
Açıklama: Varyantlar adlandırılmış durumlar sağlar.
2 varyant çağrısı
<motion.div variants={variants} initial="____" animate="visible"><motion.div variants={variants} initial="hidden" animate="visible">Açıklama: hidden başlangıç durumudur.
3 motion bileşeni: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
variants |
Durum nesnesi |
hidden |
Gizli durum |
visible |
Görünür durum |
transition |
Süre |