كتابة دالة انتقال مخصصة
أعد دوال CSS أو tick من انتقال مخصص لتحريك دخول عناصر DOM وخروجها
كتابة دالة انتقال مخصصة درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
انتقالات مخصصة
بعيدًا عن الانتقالات المضمنة، يمكنكم كتابة دوال انتقال مخصصة بالكامل.
توقيع الدالة
تأخذ دالة الانتقال (node, params) وتُرجع كائن خيارات.
function spin(node) {
return {
duration: 600,
css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t};`
};
}استخدام الانتقال
طبّقوه باستخدام transition:spin على أي عنصر.
دالة CSS
أعيدوا دالة css(t, u). تتدرج t من 0 إلى 1، بينما تتدرج u من 1 إلى 0.
دالة JS (tick)
بالنسبة إلى القيم التي لا يمكن تحريكها باستخدام CSS، أعيدوا دالة tick بدلًا من ذلك.
tick: (t) => node.textContent = Math.floor(t * 100) + "%";متى نستخدم CSS وtick
CSS أسرع لأنه يستفيد من تسريع GPU. استخدموا tick فقط عندما يتعذر على CSS التعبير عن التغيير.
التسهيل
طبّقوا التسهيل داخل دالتكم أو اقبلوه كمعامل.
التأخير والمدة
أعيدوا delay وduration داخل كائن الخيارات.
مكتبة قابلة لإعادة الاستخدام
أنشئوا وحدة انتقالات لنظام التصميم الخاص بكم.
مراعاة الاتجاه
يستدعي الإطار دالتكم عند الدخول، ويُستخدم الاتجاه المعاكس عند الخروج.
الدمج مع in/out
يمكنكم استخدام دالة مخصصة للدخول وأخرى للخروج عبر in: وout:.
تحقق سريع
ما الذي تستقبله دالة css في الانتقال؟
خلاصة
عرّفوا الانتقالات المخصصة بإرجاع { duration, css } أو { duration, tick } من دالة.
الأسئلة الشائعة
هل درس «كتابة دالة انتقال مخصصة» مجاني؟
نعم — نص درس «كتابة دالة انتقال مخصصة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «كتابة دالة انتقال مخصصة»؟
أعد دوال CSS أو tick من انتقال مخصص لتحريك دخول عناصر DOM وخروجها تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «كتابة دالة انتقال مخصصة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- كتابة دالة انتقال مخصصة
- معلمات الانتقال: node وduration وdelay
- إنشاء انتقال متحوّل
- انتقالات CSS مقابل JavaScript