التحريك باستخدام tailwind css

محمود سعداوي2 · 2 أبريل

السلام عليكم.

في الكود التالي لم أعرف لماذا يقع تفعيل التحريك (animation)

الكود الأول

<div
     className={`w-20 bg-slate-50 flex flex-col absolute top-14 transition-all duration-500 ease-in-out`}
     style={{
     right: dropdown ? "2px" : "-100%",
     }}
 >

الكود الثاني

<div
        className={`w-20 bg-slate-50 flex flex-col absolute top-14 transition-all duration-500 ease-in-out ${dropdown ? "right-2" : "right-[-100%]"}`}
        // style={{
        //   right: dropdown ? "2px" : "-100%",
        // }}
      >

شكرا.

Mustafa Mahmoud7 · 2 أبريل

وعليكم السلام محمود
الكود الأول والثانى يؤديان نفس الوظيفة
الأولى مكتوبة بالكامل داخل الصنف مع استخدام السلاسل النموذجية `` لإضافة متغيرات داخل السلسلة النصية
الثانية استخدمنا مزيج من الصنف والتنسيق .
وهى عندما تكون القيمة dropdown صحيحة يتم تموضع هذا العنصر 2px من ناحية اليمين بالنسبة للعنصر الأب الذى بداخله هذا العنصر
وعندما تكون تكون القيمة dropdown خاطئة يتم تموضع هذا العنصر -100% من ناحية اليمين بالنسبة للعنصر الأب الذى بداخله هذا العنصر
ويظهرون على أنهم تحريك بسبب
1- transition-all : يضيف تأثير الانتقال على جيمع الخصائص
2- duration-500 : تقوم بتحديد مدة الحركة 500ms
3- ease-in-out : تقوم بتحديد كيفية الإنتقال من الحالة الأولية إلى الحالة النهائية
بالتوفيق..

محمود سعداوي2 · 2 أبريل

المشكل أن الكود يعمل دون تحريك.

يعني لم يتم تفعيل animation

Mustafa Mahmoud7 · 2 أبريل

مرحبا محمود

تأكد أن الأب الذى بداخله هذا الdiv عليه التموضع relative

<div class="relative"></div>

تأكد أيضا أن ال dropdown تتغير من true ل false والعكس

التحريك باستخدام tailwind css

السؤال

محمود سعداوي2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Mahmoud7

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمود سعداوي2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Mahmoud7

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية