in: وout: للانتقالات غير المتماثلة
حدّد انتقالات مختلفة لدخول العناصر وخروجها
in: وout: للانتقالات غير المتماثلة درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
سبب استخدام الانتقالات غير المتماثلة
قد ترغبون أحيانًا في استخدام حركات مختلفة عند دخول العنصر وعند خروجه.
التوجيه in:
طبّقوا انتقالًا عند إدراج العنصر فقط.
<p in:fly={{ y: 50 }}>Enter</p>التوجيه out:
طبّقوا انتقالًا عند إزالة العنصر فقط.
<p out:fade>Leave</p>دمج التوجيهين
استخدموا التوجيهين معًا على عنصر واحد لإنشاء حركات دخول وخروج مخصّصة بالكامل.
<p in:fly={{ y: 50 }} out:fade={{ duration: 200 }}>...</p>دوال مختلفة
يمكن أن يكون انتقالا in وout دالتين مختلفتين تمامًا، مثل fly وfade.
معلمات مختلفة
مرّروا مدة أو تأخيرًا أو تسارعًا مختلفًا لكل اتجاه.
الاستخدام في كتل #if
يجب إنشاء العنصر أو إزالته تفاعليًا، كما هو الحال مع الانتقالات العادية.
تجنبوا الجمع بين transition: وin:/out:
اختاروا إما transition: للانتقالات المتماثلة، أو in:/out: للانتقالات غير المتماثلة. يؤدي الجمع بينها إلى تعارضات.
مثال واقعي
قد تظهر رسالة toast من الأعلى باستخدام fly، ثم تختفي في موضعها باستخدام fade.
<div in:fly={{ y: -50 }} out:fade>{message}</div>الأداء
تستهلك كل انتقال CPU. استخدموها باعتدال في القوائم الكبيرة.
نمط المراجعة
تُعدّ الانتقالات غير المتماثلة طريقة سريعة لتحسين مظهر الواجهة — فالدخول يبدو مرحّبًا، والخروج يبدو سريعًا.
تحقق سريع
ما الفرق بين in: وout:؟
مراجعة
استخدموا in: للدخول وout: للخروج. وادمجوهما لإنشاء انتقالات غير متماثلة ومتقنة.
الأسئلة الشائعة
هل درس «in: وout: للانتقالات غير المتماثلة» مجاني؟
نعم — نص درس «in: وout: للانتقالات غير المتماثلة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «in: وout: للانتقالات غير المتماثلة»؟
حدّد انتقالات مختلفة لدخول العناصر وخروجها تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «in: وout: للانتقالات غير المتماثلة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- transition:fade وtransition:fly
- معلمات الانتقال: duration وdelay وeasing
- in: وout: للانتقالات غير المتماثلة
- transition:draw لمسارات SVG