animate:flip لإعادة ترتيب القوائم
حرّك عناصر القائمة بسلاسة عند تغيّر ترتيبها باستخدام تقنية FLIP
animate:flip لإعادة ترتيب القوائم درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
وظيفة animate:flip
يحرّك flip العناصر بسلاسة عندما يتغيّر موضعها في keyed each block.
الاستيراد
من svelte/animate.
import { flip } from "svelte/animate";التطبيق على العناصر
أرفقوه بالعناصر الموجودة داخل keyed each.
{#each items as item (item.id)}
<li animate:flip>{item.name}</li>
{/each}تقنية FLIP
تشير FLIP إلى First وLast وInvert وPlay. يحسب Svelte الفرق ويحرّكه بسلاسة باستخدام transforms.
ضرورة استخدام Keyed Each
تعتمد الحركة على المفاتيح لمعرفة عقد DOM التي تقابل العناصر المختلفة.
المعلمات
مرّر خيارات { duration, delay, easing } كما تفعل مع الانتقالات.
<li animate:flip={{ duration: 300 }}>المحفزات الشائعة
إعادة الترتيب عبر السحب والإفلات، أو الفرز، أو التصفية، أو الخلط.
الدمج مع الانتقالات
اربطه مع transition: لإضافة رسوم متحركة للدخول والخروج فوق رسوم إعادة الترتيب المتحركة.
الأداء
يستخدم تحويلات CSS، ويظل سلسًا حتى مع مئات العناصر.
القيود
لا يمكن تحريك عمليات النقل بين حاويات مختلفة ضمن كتل each المختلفة.
تقليل الحركة
تخطَّ الحركة عندما يفضّل المستخدم تقليل الحركة لأسباب تتعلق بإمكانية الوصول.
تحقق سريع
ما الذي يتطلبه animate:flip؟
مراجعة
يحرّك animate:flip عمليات إعادة ترتيب القوائم بسلاسة داخل كتل each ذات المفاتيح باستخدام تقنية FLIP.
الأسئلة الشائعة
هل درس «animate:flip لإعادة ترتيب القوائم» مجاني؟
نعم — نص درس «animate:flip لإعادة ترتيب القوائم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «animate:flip لإعادة ترتيب القوائم»؟
حرّك عناصر القائمة بسلاسة عند تغيّر ترتيبها باستخدام تقنية FLIP تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «animate:flip لإعادة ترتيب القوائم»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- animate:flip لإعادة ترتيب القوائم
- مخزنا spring() وtweened()
- دوال التيسير المخصصة
- دمج الانتقالات والرسوم المتحركة