CSS Academy · درس

واجهة View Transitions API

أنشئ حركات انتقال سلسة للصفحات والعناصر باستخدام واجهة CSS View Transitions API.

واجهة View Transitions API درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما هي View Transitions API؟

تتيح View Transitions API (في Chrome 111+) انتقالات سلسة ومتحركة بين حالات مختلفة للصفحة أو بين عمليات الانتقال من صفحة إلى أخرى. فهي تلتقط لقطتي الشاشة قبل التغيير وبعده، ثم تنشئ انتقالًا متدرجًا بينهما باستخدام رسوم CSS المتحركة، مما يتيح انتقالات شبيهة بتطبيقات الأجهزة على الويب.

الانتقالات داخل المستند نفسه

شغّلوا انتقالًا داخل الصفحة نفسها بلف تحديث DOM داخل document.startViewTransition(() => updateDom()). يلتقط المتصفح الحالة القديمة، وينفذ التحديث، ثم يلتقط الحالة الجديدة، وينشئ انتقالًا متدرجًا بينهما تلقائيًا.

<button id="update-btn">Update Content</button>
<div class="content">Before update</div>

التلاشي المتبادل الافتراضي

من دون أي CSS، تنفذ View Transitions تلاشيًا متبادلًا بسيطًا بين حالتي الصفحة القديمة والجديدة. يضيف هذا السطر الواحد من JavaScript انتقالًا متقنًا كان يتطلب سابقًا تنسيقًا معقدًا للرسوم المتحركة في CSS أو مكتبة رسوم متحركة مخصصة.

العناصر الزائفة في CSS

تتيح API أربعة عناصر زائفة: ::view-transition (طبقة التراكب الجذرية)، و::view-transition-old(root) (لقطة الصفحة القديمة)، و::view-transition-new(root) (لقطة الصفحة الجديدة)، و::view-transition-image-pair(root). يمكنكم تخصيصها باستخدام رسوم CSS المتحركة.

الانتقالات المسماة باستخدام view-transition-name

عيّنوا view-transition-name: hero-image لعنصر يبقى موجودًا طوال الانتقال. تنقل API هذا العنصر بسلاسة من موضعه وحجمه القديمين إلى موضعه وحجمه الجديدين، فتنشئ تلقائيًا رسومًا متحركة سلسة على مستوى العنصر.

<div class="hero-img"></div>

الرسوم المتحركة المخصصة

استبدلوا التلاشي المتبادل الافتراضي بإطارات رئيسية مخصصة على العناصر الزائفة: أدخلوا العنصر من اليمين عند الانتقال إلى الأمام، ومن اليسار عند الرجوع. استهدفوا ::view-transition-new(root) و::view-transition-old(root) باستخدام @keyframes.

انتقالات MPA (Navigation API)

تُجري انتقالات View Transitions بين المستندات (في Chrome 126+) رسومًا متحركة أثناء الانتقال بين صفحات كاملة في التطبيقات متعددة الصفحات. أضيفوا @view-transition { navigation: auto; } إلى CSS، وسيتولى المتصفح الانتقال بين صفحات HTML تلقائيًا من دون الحاجة إلى JavaScript.

إمكانية الوصول: احترام تفضيلات الحركة

ينبغي ألا يتعرض المستخدمون الذين يعانون من اضطرابات دهليزية لانتقالات كثيرة الحركة. لفّوا رسوم الانتقال المتحركة داخل @media (prefers-reduced-motion: no-preference) لتعطيل الرسوم المخصصة للمستخدمين الذين يفضلون تقليل الحركة، مع الإبقاء على تحديث DOM الوظيفي.

<p>This rule targets browser-generated <code>::view-transition-old(root)</code> and <code>::view-transition-new(root)</code> pseudo-elements &mdash; visible only during an active view transition, not in a static preview.</p>

التكامل مع أطر SPA

يدعم React Router v6.4+ وVue Router وAstro ميزة View Transitions. وتلف أطر العمل تغييرات المسارات داخل startViewTransition تلقائيًا. اضبطوا أنماط الانتقال لكل مسار باستخدام view-transition-name على العناصر المستمرة، مثل عناصر التنقل وهياكل التخطيط.

اعتبارات الأداء

تلتقط View Transitions لقطات شاشة للصفحة، وقد يكون ذلك مكلفًا في التخطيطات المعقدة. وقد تظهر تقطعات أثناء الالتقاط في الصفحات الكبيرة التي تحتوي على طبقات مركبة كثيرة. حافظوا على مدة الانتقال أقل من 300ms، وتجنبوا تنفيذ الانتقالات على أشجار فرعية شديدة التعقيد.

التحسين التدريجي

تحققوا من توفر API قبل استخدامها: if (!document.startViewTransition) { updateDom(); return; }. يحدّث البديل DOM بالطريقة المعتادة من دون رسوم متحركة. وتُعد View Transitions تحسينًا تدريجيًا؛ إذ يعمل التطبيق من دونها، وهي تحسن التجربة فحسب في المتصفحات التي تدعمها.

اختبار المعرفة

ماذا يتيح view-transition-name على عنصر أثناء تنفيذ View Transition؟

الخلاصة

تتيح View Transitions API رسوم التلاشي المتبادل والتحول بين حالات DOM أو عمليات الانتقال بين الصفحات باستخدام قدر قليل من التعليمات البرمجية. وتتحول العناصر ذات الانتقالات المسماة تلقائيًا، بينما تستبدل رسوم العناصر الزائفة المخصصة التلاشي المتبادل الافتراضي. احترموا prefers-reduced-motion، واستخدموا التحسين التدريجي للمتصفحات غير المدعومة.

الأسئلة الشائعة

هل درس «واجهة View Transitions API» مجاني؟

نعم — نص درس «واجهة View Transitions API» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «واجهة View Transitions API»؟

أنشئ حركات انتقال سلسة للصفحات والعناصر باستخدام واجهة CSS View Transitions API. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «واجهة View Transitions API»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy