الانتقالات والحركات

الانتقالات والحركات في Tailwind CSS

تعطي الانتقالات والحركات الحياة لواجهتك عن طريق إضافة تأثيرات حركة سلسة ومصقولة. يوفر Tailwind CSS أدوات قوية للتحكم في انتقالات CSS ويتضمن حركات مدمجة مسبقاً يمكنك تطبيقها على الفور. فهم هذه الأدوات ضروري لإنشاء تجارب مستخدم حديثة وجذابة.

خاصية الانتقال

تحدد أدوات transition خصائص CSS التي يجب أن تتحرك عند تغييرها:

<!-- انتقال جميع الخصائص -->
<button class="transition-all bg-blue-500 hover:bg-blue-600 hover:scale-110 text-white px-4 py-2 rounded">
    مرر فوقي
</button>

<!-- انتقال خصائص محددة -->
<button class="transition-colors bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
    الألوان فقط
</button>

<button class="transition-transform hover:scale-110 bg-green-500 text-white px-4 py-2 rounded">
    التحويل فقط
</button>

<button class="transition-opacity hover:opacity-50 bg-purple-500 text-white px-4 py-2 rounded">
    الشفافية فقط
</button>

<button class="transition-shadow hover:shadow-lg bg-red-500 text-white px-4 py-2 rounded">
    الظل فقط
</button>

<!-- بدون انتقال -->
<button class="transition-none bg-gray-500 hover:bg-gray-700 text-white px-4 py-2 rounded">
    بدون انتقال
</button>

مدة الانتقال

تتحكم أدوات المدة في المدة التي يستغرقها الانتقال حتى يكتمل:

<!-- مدد مختلفة -->
<button class="transition-all duration-75 hover:scale-110 bg-blue-500 text-white px-4 py-2 rounded mr-2">
    75ms (سريع جداً)
</button>

<button class="transition-all duration-150 hover:scale-110 bg-blue-500 text-white px-4 py-2 rounded mr-2">
    150ms (افتراضي)
</button>

<button class="transition-all duration-300 hover:scale-110 bg-blue-500 text-white px-4 py-2 rounded mr-2">
    300ms (متوسط)
</button>

<button class="transition-all duration-500 hover:scale-110 bg-blue-500 text-white px-4 py-2 rounded mr-2">
    500ms (بطيء)
</button>

<button class="transition-all duration-700 hover:scale-110 bg-blue-500 text-white px-4 py-2 rounded mr-2">
    700ms (أبطأ)
</button>

<button class="transition-all duration-1000 hover:scale-110 bg-blue-500 text-white px-4 py-2 rounded">
    1000ms (الأبطأ)
</button>

وظائف التوقيت (التخفيف)

تتحكم وظائف التوقيت في منحنى التسارع للانتقالات، مما يجعل الحركات تبدو أكثر طبيعية:

<!-- خطي (سرعة ثابتة) -->
<div class="transition-all duration-500 ease-linear hover:translate-x-64 bg-blue-500 text-white p-4 rounded mb-4">
    خطي
</div>

<!-- تخفيف داخلي (بداية بطيئة) -->
<div class="transition-all duration-500 ease-in hover:translate-x-64 bg-green-500 text-white p-4 rounded mb-4">
    تخفيف داخلي
</div>

<!-- تخفيف خارجي (نهاية بطيئة) -->
<div class="transition-all duration-500 ease-out hover:translate-x-64 bg-yellow-500 text-white p-4 rounded mb-4">
    تخفيف خارجي
</div>

<!-- تخفيف داخلي-خارجي (بداية ونهاية بطيئة) -->
<div class="transition-all duration-500 ease-in-out hover:translate-x-64 bg-red-500 text-white p-4 rounded mb-4">
    تخفيف داخلي-خارجي
</div>

تأخير الانتقال

تؤجل أدوات التأخير بدء الانتقال:

<!-- حركات متدرجة -->
<div class="space-y-4">
    <div class="transition-all duration-300 delay-0 hover:translate-x-8 bg-blue-500 text-white p-4 rounded">
        بدون تأخير
    </div>
    <div class="transition-all duration-300 delay-75 hover:translate-x-8 bg-blue-500 text-white p-4 rounded">
        تأخير 75ms
    </div>
    <div class="transition-all duration-300 delay-150 hover:translate-x-8 bg-blue-500 text-white p-4 rounded">
        تأخير 150ms
    </div>
    <div class="transition-all duration-300 delay-300 hover:translate-x-8 bg-blue-500 text-white p-4 rounded">
        تأخير 300ms
    </div>
    <div class="transition-all duration-300 delay-500 hover:translate-x-8 bg-blue-500 text-white p-4 rounded">
        تأخير 500ms
    </div>
    <div class="transition-all duration-300 delay-700 hover:translate-x-8 bg-blue-500 text-white p-4 rounded">
        تأخير 700ms
    </div>
    <div class="transition-all duration-300 delay-1000 hover:translate-x-8 bg-blue-500 text-white p-4 rounded">
        تأخير 1000ms
    </div>
</div>

<!-- مرر فوق الأب لرؤية التأثير المتدرج -->
<div class="group bg-gray-100 p-8 rounded-lg">
    <h3 class="text-xl font-bold mb-4">مرر فوق هذه الحاوية</h3>
    <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-0 bg-blue-500 text-white p-3 rounded mb-2">
        يظهر أولاً
    </div>
    <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-150 bg-blue-500 text-white p-3 rounded mb-2">
        يظهر ثانياً
    </div>
    <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-300 bg-blue-500 text-white p-3 rounded">
        يظهر ثالثاً
    </div>
</div>

الحركات المدمجة

يتضمن Tailwind العديد من الحركات المدمجة مسبقاً التي يمكنك استخدامها على الفور:

<!-- حركة الدوران (دوار التحميل) -->
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>

<!-- حركة الرنين (نقطة الإشعار) -->
<div class="relative inline-flex">
    <span class="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75 animate-ping"></span>
    <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
</div>

<!-- حركة النبض (حالة التحميل) -->
<div class="animate-pulse bg-gray-300 h-4 rounded w-full"></div>

<!-- حركة الارتداد (جاذب الانتباه) -->
<svg class="animate-bounce w-6 h-6 text-blue-500">
    <!-- أيقونة سهم لأسفل -->
</svg>

<!-- بدون (تعطيل الحركة) -->
<div class="animate-none">بدون حركة</div>

حركة الدوران

<!-- دوار أساسي -->
<div class="flex items-center justify-center">
    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
</div>

<!-- دوار مع سمك -->
<div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-500"></div>

<!-- زر دوار -->
<button class="bg-blue-500 text-white px-6 py-3 rounded-lg flex items-center gap-2" disabled>
    <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
    جاري التحميل...
</button>

<!-- تحميل صفحة كاملة -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg p-8">
        <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-blue-500 mx-auto"></div>
        <p class="mt-4 text-gray-600">جاري التحميل...</p>
    </div>
</div>

حركة الرنين

<!-- شارة الإشعار -->
<button class="relative">
    <svg class="w-6 h-6"><!-- أيقونة الجرس --></svg>
    <span class="absolute top-0 right-0 inline-flex">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
    </span>
</button>

<!-- مؤشر مباشر -->
<div class="flex items-center gap-2">
    <div class="relative">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
    </div>
    <span class="text-sm font-medium text-gray-700">مباشر</span>
</div>

<!-- بطاقة الحالة -->
<div class="border border-gray-200 rounded-lg p-4 flex items-center gap-4">
    <div class="relative flex-shrink-0">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
        <span class="relative inline-flex rounded-full h-4 w-4 bg-blue-500"></span>
    </div>
    <div>
        <p class="font-semibold">النظام نشط</p>
        <p class="text-sm text-gray-600">جميع الأنظمة تعمل</p>
    </div>
</div>

حركة النبض

<!-- هيكل عظمي للبطاقة -->
<div class="border border-gray-200 rounded-lg p-6 space-y-4">
    <div class="animate-pulse flex space-x-4">
        <div class="rounded-full bg-gray-300 h-12 w-12"></div>
        <div class="flex-1 space-y-3 py-1">
            <div class="h-4 bg-gray-300 rounded w-3/4"></div>
            <div class="h-4 bg-gray-300 rounded w-1/2"></div>
        </div>
    </div>
</div>

<!-- هيكل عظمي للقائمة -->
<div class="space-y-4">
    <div class="animate-pulse">
        <div class="h-4 bg-gray-300 rounded w-full"></div>
    </div>
    <div class="animate-pulse">
        <div class="h-4 bg-gray-300 rounded w-5/6"></div>
    </div>
    <div class="animate-pulse">
        <div class="h-4 bg-gray-300 rounded w-4/6"></div>
    </div>
</div>

<!-- هيكل عظمي للصورة -->
<div class="animate-pulse bg-gray-300 rounded-lg w-full h-64"></div>

حركة الارتداد

<!-- مؤشر التمرير -->
<div class="flex flex-col items-center">
    <p class="text-gray-600 mb-2">مرر لأسفل</p>
    <svg class="animate-bounce w-6 h-6 text-blue-500">
        <!-- سهم لأسفل -->
    </svg>
</div>

<!-- دعوة للإجراء -->
<button class="relative bg-blue-500 text-white px-8 py-4 rounded-lg font-semibold">
    ابدأ الآن
    <span class="absolute -top-1 -right-1 animate-bounce">
        <span class="flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
        </span>
    </span>
</button>

<!-- أيقونة الخطأ -->
<div class="flex items-center gap-2 text-red-600">
    <svg class="animate-bounce w-5 h-5">!</svg>
    <span>حدث خطأ</span>
</div>

دمج الانتقالات مع حالات التمرير

أنشئ مكونات تفاعلية سلسة عن طريق دمج الانتقالات مع حالات التمرير والتركيز:

<!-- بطاقة مع تأثيرات انتقال متعددة -->
<div class="group bg-white border border-gray-200 rounded-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2">
    <img src="image.jpg" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110" alt="بطاقة">
    <div class="p-6">
        <h3 class="text-xl font-bold transition-colors duration-300 group-hover:text-blue-600">
            عنوان البطاقة
        </h3>
        <p class="text-gray-600 mt-2 transition-colors duration-300 group-hover:text-gray-900">
            نص وصف البطاقة
        </p>
        <button class="mt-4 bg-blue-500 text-white px-6 py-2 rounded-lg transition-all duration-300 hover:bg-blue-600 hover:shadow-lg hover:scale-105">
            اعرف المزيد
        </button>
    </div>
</div>

<!-- زر مع انزلاق أيقونة -->
<button class="group relative bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-lg overflow-hidden transition-colors duration-300">
    <span class="relative z-10 flex items-center gap-2">
        متابعة
        <svg class="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1">←</svg>
    </span>
    <span class="absolute inset-0 bg-gradient-to-r from-green-600 to-green-700 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300"></span>
</button>

<!-- رابط تنقل مع حركة خط سفلي -->
<a href="#" class="relative text-gray-700 hover:text-blue-600 transition-colors duration-300">
    حولنا
    <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-600 transition-all duration-300 group-hover:w-full"></span>
</a>

<!-- إدخال مع تأثيرات التركيز -->
<input
    type="text"
    placeholder="بحث..."
    class="w-full border-2 border-gray-300 rounded-lg px-4 py-3 transition-all duration-300 focus:border-blue-500 focus:ring-4 focus:ring-blue-200 focus:outline-none"
>

<!-- مفتاح التبديل -->
<button class="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-blue-300">
    <span class="inline-block h-6 w-6 transform rounded-full bg-white transition-transform duration-300 translate-x-1"></span>
</button>

<!-- مفتاح التبديل (حالة نشطة) -->
<button class="relative inline-flex h-8 w-14 items-center rounded-full bg-blue-500 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-blue-300">
    <span class="inline-block h-6 w-6 transform rounded-full bg-white transition-transform duration-300 translate-x-7"></span>
</button>

أنماط الحركة العملية

تلاشي النافذة المنبثقة

<!-- حاوية النافذة المنبثقة (إضافة/إزالة مع JavaScript) -->
<div class="fixed inset-0 z-50 overflow-y-auto transition-opacity duration-300 opacity-0 hidden" id="modal">
    <!-- تراكب الخلفية -->
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-300"></div>

    <!-- محتوى النافذة المنبثقة -->
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full transform transition-all duration-300 scale-95">
            <div class="p-6">
                <h2 class="text-2xl font-bold">عنوان النافذة المنبثقة</h2>
                <p class="mt-4">محتوى النافذة المنبثقة</p>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript لإظهار النافذة المنبثقة:
إزالة الفئة 'hidden'
بعد تأخير قصير، أضف 'opacity-100' و 'scale-100'
-->

انزلاق الأكورديون

<div class="space-y-2">
    <div class="border border-gray-200 rounded-lg overflow-hidden">
        <button class="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 transition-colors duration-200">
            <span class="font-semibold">القسم 1</span>
            <svg class="w-5 h-5 transition-transform duration-300 rotate-0">↓</svg>
        </button>
        <div class="max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
            <div class="p-4 border-t border-gray-200">
                <p>محتوى القسم 1</p>
            </div>
        </div>
    </div>

    <!-- حالة موسعة: rotate-180 على الأيقونة، max-h-96 على المحتوى -->
    <div class="border border-gray-200 rounded-lg overflow-hidden">
        <button class="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50 transition-colors duration-200">
            <span class="font-semibold">القسم 2</span>
            <svg class="w-5 h-5 transition-transform duration-300 rotate-180">↓</svg>
        </button>
        <div class="max-h-96 overflow-hidden transition-all duration-300 ease-in-out">
            <div class="p-4 border-t border-gray-200">
                <p>محتوى القسم 2 (موسع)</p>
            </div>
        </div>
    </div>
</div>

الملخص

في هذا الدرس، أتقنت الانتقالات والحركات في Tailwind CSS:

• خاصية الانتقال: التحكم في الخصائص التي تتحرك (all، colors، transform، opacity، shadow)
• المدة: تعيين سرعة الحركة من 75ms إلى 1000ms
• وظائف التوقيت: إنشاء حركة طبيعية مع ease-in، ease-out، ease-in-out، وlinear
• التأخير: إنشاء حركات متدرجة مع بدايات متأخرة
• الحركات المدمجة: spin، ping، pulse، وbounce للأنماط الشائعة
• الدمج مع الحالات: إنشاء مكونات تفاعلية مع معدلات التمرير والتركيز والمجموعة
• الأداء: استخدم transform وopacity للحصول على حركات سلسة وذات أداء عالٍ

الانتقالات والحركات ضرورية لإنشاء واجهات مستخدم حديثة وجذابة. إنها توفر تعليقات بصرية وتوجه انتباه المستخدم وتجعل تطبيقك يبدو مصقولاً واحترافياً. تذكر استخدامها بحكمة - الكثير من الحركة يمكن أن يكون مشتتاً للانتباه، بينما الانتقالات الموضوعة جيداً تعزز تجربة المستخدم.