إنشاء انتقال متحوّل
أنشئ انتقالًا يحوّل العنصر من شكل أو موضع إلى آخر
إنشاء انتقال متحوّل درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
مفهوم التحويل التدريجي
ينقل الانتقال التحويلي العنصر بسلاسة من شكل أو موضع إلى آخر.
قراءة الحالة الأولية
قيسوا تخطيط العنصر عند بدايته باستخدام getBoundingClientRect.
حساب الفرق
قارنوا الموضعين الابتدائي والمستهدف لاشتقاق قيم التحويل.
تطبيق التحويل
أعيدوا دالة css تستوفي بين الحالة الأولية والنهائية.
css: (t) => `transform: scale(${1 - (1 - t)}); opacity: ${t};`نمط شبيه بـ FLIP
يشبه هذا تقنية FLIP التي يستخدمها animate:flip.
انتقالات العناصر المشتركة
بالنسبة إلى العناصر المشتركة بين المسارات، تساعد مكتبات مثل svelte-shared-transitions.
المربع المحيط
احسبوا التحجيم والإزاحة للتحويل بين المواضع.
واجهة المتصفح البرمجية
تتيح View Transitions API انتقالات أصلية للعناصر المشتركة، وتتوافق Svelte معها جيدًا.
الأداء
التزموا باستخدام transform وopacity، وتجنبوا تحريك الخصائص التي تحدد الهندسة.
دمج التسهيل
استخدموا دوال التسهيل للحصول على إحساس طبيعي؛ ويُعد cubic-bezier مناسبًا جدًا للتحويل التدريجي.
استخدامات عملية
يفتح مربع حوار من الزر الذي نُقر عليه، ويتمدد عنصر قائمة إلى عرض التفاصيل، وتنتقل المسارات.
تحقق سريع
ما الخصائص الأنسب للتحويل التدريجي؟
خلاصة
تقيس الانتقالات التحويلية موضعي البداية والنهاية، وتستوفي بينهما باستخدام سلاسل css المعتمدة على transform.
الأسئلة الشائعة
هل درس «إنشاء انتقال متحوّل» مجاني؟
نعم — نص درس «إنشاء انتقال متحوّل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «إنشاء انتقال متحوّل»؟
أنشئ انتقالًا يحوّل العنصر من شكل أو موضع إلى آخر تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «إنشاء انتقال متحوّل»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- كتابة دالة انتقال مخصصة
- معلمات الانتقال: node وduration وdelay
- إنشاء انتقال متحوّل
- انتقالات CSS مقابل JavaScript