Framer Motion va React bilan kengaytiriladigan teglar

Ushbu blogning video versiyasi

Framer Motion React bilan UI animatsiyasi uchun eng kuchli kutubxonalardan biri hisoblanadi. Yaqinda men Razorpay-da ishlayotgan ba'zi narsalarim uchun ushbu kutubxona bilan chuqur o'ynash imkoniyatiga ega bo'ldim. Ushbu video-blog postida men o'rganganlarimning bir qismini kengaytiriladigan teg komponentini yaratish orqali baham ko'rishni rejalashtirmoqdaman, uning mazmuni foydalanuvchi kursorning ustiga o'tganda o'zgaradi. Men shunga o'xshash komponentda turli xil chekka holatlarni muhokama qilaman, shuningdek, Framer Motion murakkab tartib animatsiyalarini qanday osonlashtiradi!

Foydalanuvchi sichqonchani ustiga olib kelganida element tarkibini o'zgartirish

:hover psevdoselektori tufayli hover bilan bog'liq uslublar CSS bilan juda oddiy, ammo hoverda element tarkibini qanday o'zgartirish mumkinligi unchalik aniq emas. Yaxshiyamki, JavaScript ikkita hodisani ochib beradi - onMouseEnter va onMouseLeave, ular mos ravishda sichqoncha elementga kirganda yoki elementni tark etganda (ochib qo'yganda) ishga tushadi. Ushbu hodisalar React-dagi holat o'zgaruvchisini yangilash uchun ishlatilishi mumkin, keyin esa element mazmunini shartli ravishda ko'rsatish uchun ishlatiladi.

function ExpandableTag({ unhoveredText, hoveredText }) {
  const [isHovering, setIsHovering] = useState(false);
  return (
    <div
      className="inline-block rounded-lg relative text-gray-300 bg-gray-900 ring-1 ring-gray-800 px-4 py-1.5 tracking-wider text-sm font-medium whitespace-nowrap"
      onMouseEnter={() => setIsHovering(true)} 
      onMouseLeave={() => setIsHovering(false)} 
    >
      {isHovering ? hoveredText : unhoveredText}
    </div>
  );
}

Bizda komponentning asosiy ilovasi tayyor, ammo ikkita muammo bor:

• Hech qanday animatsiya yo'q. Kontent bir zumda o'zgaradi, bu ushbu stsenariyda yaxshi UX bo'lmasligi mumkin va ba'zi nozik animatsiya ushbu komponentni yanada jilo qilishi mumkin.
• Qo'rqinchli miltillash. Buni ushlash qiyin, biroq agar sichqonchaga o'rnatilgan matn sichqonchaga tushirilmagan matndan kichikroq bo'lsa, foydalanuvchi komponentning miltillovchi holatga kirishiga olib kelishi mumkin. komponentlar doimiy ravishda o'zgarib turadi.

Tarkibga o'chadigan / o'chiruvchi animatsiya qo'shish

Birinchi muammoni hal qilish uchun teg ichidagi o'zgaruvchan tarkibga oddiy o'chirish va o'chirishni qo'shishdan boshlaylik. Foydalanuvchi sichqonchani teg ustiga olib kelganida, kursorsiz matn oʻchib ketadi va oʻrnatilgan matn ichkariga tushadi. Buni Framer Motion-da motion komponenti va AnimatePresence komponenti bilan bajarish juda oson. AnimatePresence komponenti motion komponenti uchun belgilangan chiqish animatsiyasi mavjud bo'lganda ishlatilishi kerak. Bizning holatda, bu kontent UIdanchiqishda o'chib ketadigan animatsiya bo'ladi.

function ExpandableTag({ unhoveredText, hoveredText }) {
  const [isHovering, setIsHovering] = useState(false);
  return (
    <div
      className="inline-block rounded-lg relative text-gray-300 bg-gray-900 ring-1 ring-gray-800 px-4 py-1.5 tracking-wider text-sm font-medium whitespace-nowrap"
      onMouseEnter={() => setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
    >
      <AnimatePresence>
        <motion.span initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
          {isHovering ? hoveredText : unhoveredText}
        </motion.span>
      </AnimatePresence>
    </div>
  );
}

Faqat bu muammoni hal qilmaydi, Framer Motion sizning animatsiyalaringiz qachon ishga tushishini bilmaydi, shuning uchun sukut bo'yicha u faqat komponent birinchi o'rnatilganda ishlaydi. Biz foydalanuvchi sichqonchani ko'tarib, elementni ochganda (masalan, tarkib o'zgarganda) animatsiya ishga tushishini xohlaymiz va bu allaqachon isHovering holat o'zgaruvchisi tomonidan kuzatiladi. Framer Motion-ga animatsiyalarni ishga tushirishni aytish uchun biz shunchaki key rekvizitini shunday o'rnatishimiz mumkinki, biz animatsiyalarni ishga tushirishni xohlaganimizda u o'zgaradi. Bizning holatda, bu key ni isHovering holat o'zgaruvchisiga asoslangan narsaga o'rnatish bo'ladi.

Bundan tashqari, komponent birinchi marta o'rnatilganda kirish animatsiyalari ishga tushishini istamaganimiz sababli, AnimatePresence komponentidagi initial propni false ga o'rnatish orqali biz bu xatti-harakatdan voz kechishimiz mumkin.

function ExpandableTag({ unhoveredText, hoveredText }) {
  const [isHovering, setIsHovering] = useState(false);
  return (
    <div
      className="inline-block rounded-lg relative text-gray-300 bg-gray-900 ring-1 ring-gray-800 px-4 py-1.5 tracking-wider text-sm font-medium whitespace-nowrap"
      onMouseEnter={() => setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
    >
      <AnimatePresence
        initial={false} 
      >
        <motion.span
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          key={isHovering ? 'hovering' : 'unhovering'} 
        >
          {isHovering ? hoveredText : unhoveredText}
        </motion.span>
      </AnimatePresence>
    </div>
  );
}