tailwindcss motion

✨ 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 :

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

• اضبط مدة motion-preset-slide-right :

 < div class =" motion-preset-slide-right motion-duration-2000 " > </ div >

• زيادة ارتفاع motion-preset-bounce :

 < div class =" motion-preset-bounce -motion-translate-y-in-150 " > </ div > 

الرسوم المتحركة الأساسية

بصرف النظر عن الإعدادات المسبقة، يمكنك إنشاء الرسوم المتحركة المخصصة الخاصة بك من خلال الجمع بين هذه الفئات الأساسية:

• تتلاشى في : motion-opacity-in-0
• الشريحة في :
  • من الأسفل: motion-translate-y-in-100
  • من الأعلى: -motion-translate-y-in-100
• مقياس في : motion-scale-in-75
• تدوير في :
  • من 180 درجة: motion-rotate-in-180
  • من -90 درجة: -motion-rotate-in-90
• طمس في : motion-blur-in-sm
• تدرج الرمادي في : motion-grayscale-in
• تغيير لون الخلفية : motion-bg-in-red-500
• تغيير لون النص : motion-text-in-blue-500

الجمع بين الرسوم المتحركة

يمكنك دمج رسوم متحركة متعددة في عنصر واحد:

 < div
  class =" motion-scale-in-75 motion-translate-y-in-100 motion-rotate-in-90 "
> </ div >

الخروج من الرسوم المتحركة

بالنسبة للرسوم المتحركة للخروج، ما عليك سوى استبدال اسم الفئة in out .

المعدلات

يمكنك تخصيص وظيفة المدة والتأخير والتوقيت لأي رسوم متحركة.

• المدة : motion-duration-500
• التأخير : motion-delay-500
• وظيفة التوقيت : motion-timing-spring-bouncy

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

 < div
  class =" motion-duration-2000 motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

ينطبق هذا على مدة 2000 مللي ثانية لكل من الرسوم المتحركة للتدوير والعتامة.

المعدلات لكل خاصية

يمكنك تطبيق المعدلات على خصائص معينة باستخدام الشرطة المائلة / .

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

 < div
  class =" motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

هنا، يتم تطبيق تأخير قدره 500 مللي ثانية فقط على التدوير، وليس العتامة.

وظائف سهلة

يتضمن البرنامج المساعد وظائف توقيت مخصصة:

بعض الأمثلة هي:

• motion-ease-spring-smooth
• motion-ease-spring-snappy
• motion-ease-spring-bouncy
• motion-ease-spring-bounciest
• motion-ease-bounce
• motion-ease-bounce
• motion-ease-in-quart

أمثلة

الصفحة المقصودة - https://play.tailwindcss.com/uAuVF8F1vC

مربع حوار الدردشة - https://play.tailwindcss.com/gjGqEKswjQ

جزيرة ديناميكية منخفضة البطارية - https://play.tailwindcss.com/tvYFbHtNNQ

عينات ألوان Apple - https://play.tailwindcss.com/cvQ3Nk3v8j

ما هو رومبو؟

Rombo هي شركة في مرحلة مبكرة، حيث تقوم ببناء أدوات لمساعدة الشركات على بناء واجهات تفاعلية جميلة. لقد بدأنا بمجموعة أدوات للمهندسين والمصممين والمسوقين المبدعين للتنشيط محليًا داخل مسارات العمل الشائعة - مثل Tailwind وFigma وWebflow وShopify والمزيد في المستقبل! قم بالتسجيل للحصول على التحديثات على موقعنا على https://rombo.co