transition:fade وtransition:fly
طبّق انتقالَي fade وfly المضمّنين على العناصر التي تتحكم فيها {#if}
transition:fade وtransition:fly درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
الانتقالات المضمّنة
يوفّر Svelte عدة انتقالات في svelte/transition: fade وfly وslide وscale وblur وdraw.
استيراد انتقال
استوردوا الانتقالات التي تحتاجون إليها.
import { fade, fly } from "svelte/transition";الإرفاق باستخدام transition:
طبّقوا الانتقال باستخدام transition: على عنصر تتحكم فيه {#if}.
{#if visible}
<p transition:fade>Hello</p>
{/if}انتقال fly
ينقل انتقال fly العناصر من إزاحة إحداثية إلى موضعها.
{#if visible}
<div transition:fly={{ x: -200, duration: 400 }}>Slide in</div>
{/if}كائن المعلمات
مرّروا خيارات مثل x وy وduration وdelay وeasing.
متى تُفعّل المحفزات
تُنفّذ الانتقالات عند إضافة العنصر وإزالته داخل كتل {#if} أو {#each} أو {#await}.
دمج الانتقالات
طبّقوا انتقالًا واحدًا لكل directive. استخدموا in: وout: للانتقالات غير المتماثلة.
تجربة مستخدم سلسة
تجعل الانتقالات واجهة المستخدم تبدو متقنة من دون كتابة keyframes يدويًا.
الأداء
تستخدم الانتقالات المضمّنة CSS كلما أمكن لتسريع المعالجة عبر GPU.
تقليل الحركة
احترموا prefers-reduced-motion من خلال تطبيق الانتقالات بشكل مشروط.
التسارع
مرّروا دالة تسارع من svelte/easing للحصول على حركة أكثر تطورًا.
import { cubicOut } from "svelte/easing";
<p transition:fade={{ easing: cubicOut }}>...</p>تحقق سريع
متى تُنفّذ الانتقالات؟
مراجعة
استوردوا من svelte/transition، وأرفقوا باستخدام transition:، ومرّروا كائنات المعلمات للتحكم.
الأسئلة الشائعة
هل درس «transition:fade وtransition:fly» مجاني؟
نعم — نص درس «transition:fade وtransition:fly» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «transition:fade وtransition:fly»؟
طبّق انتقالَي fade وfly المضمّنين على العناصر التي تتحكم فيها {#if} تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «transition:fade وtransition:fly»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- transition:fade وtransition:fly
- معلمات الانتقال: duration وdelay وeasing
- in: وout: للانتقالات غير المتماثلة
- transition:draw لمسارات SVG