معلمات الانتقال: duration وdelay وeasing
خصّص الانتقالات بتمرير معلمات duration وdelay وeasing
معلمات الانتقال: duration وdelay وeasing درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
كائن المعلمات
تقبل جميع الانتقالات كائن خيارات بوصفه الوسيط الثاني.
<p transition:fade={{ duration: 600, delay: 200 }}>duration
المدة الإجمالية للحركة بالمللي ثانية. القيمة الافتراضية 400ms.
delay
الانتظار قبل بدء الحركة. ويفيد ذلك في واجهات المستخدم المتسلسلة.
easing
دالة تحوّل التقدم الخطي (0..1) إلى منحنى مخصّص. والقيمة الافتراضية هي linear.
دوال التسارع المضمّنة
استوردوا من svelte/easing: linear وquadIn وcubicOut وelasticOut وغير ذلك.
import { elasticOut } from "svelte/easing";خيارات لكل انتقال
لكل انتقال معلماته الخاصة. يضيف Fly الخيارين x وy، بينما يضيف scale الخيار start.
اختيار المدد
استخدموا مددًا قصيرة (100-200ms) للتفاعلات الدقيقة، ومددًا أطول (400-700ms) للانتقالات بين الصفحات.
المعلمات التفاعلية
يمكن أن تعتمد قيم المعلمات على الحالة التفاعلية.
<p transition:fly={{ x: dir * 200 }}>...السلوك الافتراضي
إذا حذفتم كائن المعلمات، فستُطبّق القيم الافتراضية المناسبة.
التوافق مع التصميم
اضبطوا المدة والتسارع حتى تبدو الحركة مناسبة، واختبروها على جهاز حقيقي.
إمكانية الوصول
احترموا prefers-reduced-motion من خلال تقليل المدة أو تخطي الانتقالات.
تحقق سريع
من أين تأتي دوال التسارع؟
مراجعة
اضبطوا duration وdelay وeasing (من svelte/easing) للوصول إلى الإحساس المناسب.
الأسئلة الشائعة
هل درس «معلمات الانتقال: duration وdelay وeasing» مجاني؟
نعم — نص درس «معلمات الانتقال: duration وdelay وeasing» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «معلمات الانتقال: duration وdelay وeasing»؟
خصّص الانتقالات بتمرير معلمات duration وdelay وeasing تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «معلمات الانتقال: duration وdelay وeasing»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- transition:fade وtransition:fly
- معلمات الانتقال: duration وdelay وeasing
- in: وout: للانتقالات غير المتماثلة
- transition:draw لمسارات SVG