معلمات الانتقال: node وduration وdelay
اقبل عقدة وكائن معلمات في دالة الانتقال لمزيد من المرونة
معلمات الانتقال: node وduration وdelay درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
توقيع الدالة
تقبل الانتقالات المخصصة (node, params) لتوفير المرونة.
قراءة node
استخدموا node لحساب خصائص مثل حجمه الحالي أو موضعه.
const rect = node.getBoundingClientRect();تمرير المعاملات
يمرّر المستهلك المعاملات باستخدام التوجيه.
<p transition:spin={{ duration: 800 }}>...القيم الافتراضية
عالجوا المعاملات المفقودة باستخدام قيم افتراضية داخل الدالة.
function spin(node, { duration = 600 } = {}) { ... }المعاملات التفاعلية
لا تعيد تغيّرات المعاملات تشغيل الانتقال أثناء تنفيذه؛ يستخدم التركيب التالي القيمة الجديدة.
المدة المحسوبة
يمكنكم حساب المدة من البيانات، مثل طول الكلمة لتأثيرات الكتابة آلةً كاتبة.
معامل التسهيل
اقبلوا معامل تسهيل ليتمكن المستهلكون من تخصيص المنحنى.
معامل التأخير
رتّبوا الإدخالات زمنيًا بتمرير تأخير مشتق من فهرس.
{#each items as item, i}
<p transition:fly={{ delay: i * 50 }}>{item}</p>
{/each}نصائح حول سلاسل CSS
أعيدوا تحويلات قابلة للتركيب، وتجنبوا خصائص التسبب في إعادة حساب التخطيط مثل top وleft.
الأداء
التزموا باستخدام transform وopacity للحصول على رسوم متحركة سلسة للغاية.
الاختبار
افحصوا الأنماط المحسوبة أثناء الانتقال باستخدام أدوات المطور في المتصفح.
تحقق سريع
ماذا يوفر كائن params؟
خلاصة
اقبلوا params واستخدموه لإنشاء انتقالات مرنة. وفّروا قيمًا افتراضية للقيم المفقودة.
الأسئلة الشائعة
هل درس «معلمات الانتقال: node وduration وdelay» مجاني؟
نعم — نص درس «معلمات الانتقال: node وduration وdelay» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «معلمات الانتقال: node وduration وdelay»؟
اقبل عقدة وكائن معلمات في دالة الانتقال لمزيد من المرونة تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «معلمات الانتقال: node وduration وdelay»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- كتابة دالة انتقال مخصصة
- معلمات الانتقال: node وduration وdelay
- إنشاء انتقال متحوّل
- انتقالات CSS مقابل JavaScript