حركة tailwindcss

✨ tailwindcss-motion β ✨

tailwindcss-motion عبارة عن مكون إضافي لـ Tailwind CSS مصنوع في RomboHQ. إنها مكتبة رسوم متحركة بسيطة ولكنها قوية ذات بنية بسيطة.

الحركة، دون ضجة.

⚒️ التثبيت

1. قم بتثبيت حزمة npm

npm i -D tailwindcss-motion

2. أضف إلى tailwind.config.js الخاص بك

 // tailwind.config.js

export default {
     content : [ ... ] ,
     theme : {
        extend : { ... } ,
     } ,
     plugins : [ require ( 'tailwindcss-motion' ) ] ,
} ;

أو لاستخدام ESM:

 import tailwindcssMotion from "tailwindcss-motion" ;

/** @type {import('tailwindcss').Config} */
export default {
     content : [ ... ] ,
     theme : {
          extend : { } ,
     } ,
     plugins : [ tailwindcssMotion ] ,
} ; 

كيف يعمل؟

نحن نقدم بناء جملة بسيطًا لتحريك أي عنصر في مشروع Tailwind الخاص بك. بدلاً من تحديد الإطارات الرئيسية المخصصة، فإننا نقدم فئات مساعدة لتحريك كل بُعد، بشكل مضمّن.

على سبيل المثال، للحصول على تأثير الشريحة والتلاشي — تحتاج ببساطة motion-translate-x-in-25 motion-opacity-in-0 أو يمكنك استخدام أحد إعداداتنا المسبقة مع motion-preset-fade

إعدادات الحركة المسبقة

نحن نقدم مجموعة من الإعدادات المسبقة لتحريك مكوناتك بسهولة:

• تتلاشى : motion-preset-fade
• شريحة :
  • اليمين: motion-preset-slide-right
  • اليسار: motion-preset-slide-left
  • لأعلى: motion-preset-slide-up
  • للأسفل: motion-preset-slide-down
• التركيز : motion-preset-focus
• طمس :
  • اليمين: motion-preset-blur-right
  • اليسار: motion-preset-blur-left
  • لأعلى: motion-preset-blur-up
  • للأسفل: motion-preset-blur-down
• ترتد : motion-preset-bounce
• توسيع : motion-preset-expand
• تقليص : motion-preset-shrink
• البوب : motion-preset-pop
• ضغط : motion-preset-compress
• اهتزاز : motion-preset-shake
• تذبذب : motion-preset-wiggle
• النثار : motion-preset-confetti
• الآلة الكاتبة : motion-preset-typewriter-[number of characters]
• Flomoji : motion-preset-flomoji

تخصيص الإعدادات المسبقة

يمكنك تخصيص الإعدادات المسبقة بشكل أكبر باستخدام الرسوم المتحركة الأساسية وفئات المعدلات.

على سبيل المثال:

• إضافة تأخير إلى motion-preset-fade :

" style=";text-align:right;direction:rtl">

 < div class =" motion-preset-fade motion-delay-500 " >  div >