محمود سعداوي2 نشر 2 أبريل 2024 أرسل تقرير نشر 2 أبريل 2024 السلام عليكم. في الكود التالي لم أعرف لماذا يقع تفعيل التحريك (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%", // }} > شكرا. 1 اقتباس
0 Mustafa Mahmoud7 نشر 2 أبريل 2024 أرسل تقرير نشر 2 أبريل 2024 وعليكم السلام محمود الكود الأول والثانى يؤديان نفس الوظيفة الأولى مكتوبة بالكامل داخل الصنف مع استخدام السلاسل النموذجية `` لإضافة متغيرات داخل السلسلة النصية الثانية استخدمنا مزيج من الصنف والتنسيق . وهى عندما تكون القيمة dropdown صحيحة يتم تموضع هذا العنصر 2px من ناحية اليمين بالنسبة للعنصر الأب الذى بداخله هذا العنصر وعندما تكون تكون القيمة dropdown خاطئة يتم تموضع هذا العنصر -100% من ناحية اليمين بالنسبة للعنصر الأب الذى بداخله هذا العنصر ويظهرون على أنهم تحريك بسبب 1- transition-all : يضيف تأثير الانتقال على جيمع الخصائص 2- duration-500 : تقوم بتحديد مدة الحركة 500ms 3- ease-in-out : تقوم بتحديد كيفية الإنتقال من الحالة الأولية إلى الحالة النهائية بالتوفيق.. 1 اقتباس
0 محمود سعداوي2 نشر 2 أبريل 2024 الكاتب أرسل تقرير نشر 2 أبريل 2024 المشكل أن الكود يعمل دون تحريك. يعني لم يتم تفعيل animation 1 اقتباس
0 Mustafa Mahmoud7 نشر 2 أبريل 2024 أرسل تقرير نشر 2 أبريل 2024 مرحبا محمود تأكد أن الأب الذى بداخله هذا الdiv عليه التموضع relative <div class="relative"></div> تأكد أيضا أن ال dropdown تتغير من true ل false والعكس 1 اقتباس
السؤال
محمود سعداوي2
السلام عليكم.
في الكود التالي لم أعرف لماذا يقع تفعيل التحريك (animation)
الكود الأول
الكود الثاني
شكرا.
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.