مطابقة أنواع انتقالات العرض في CSS: إتقان ربط أنواع الحركات

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

فهم أساسيات انتقالات العرض

قبل الغوص في ربط أنواع الحركات، دعنا نلخص بإيجاز أساسيات انتقالات العرض في CSS. إنها توفر آلية موحدة لتحريك التغييرات بين حالات DOM. عند حدوث تغيير في الحالة (على سبيل المثال، التنقل بين الصفحات في تطبيق أحادي الصفحة أو تحديث المحتوى داخل مكون)، تلتقط انتقالات العرض حالة العناصر قبل وبعد التغيير. ثم يتم استخدام هذه الحالات الملتقطة لإنشاء انتقالات متحركة.

يتم بدء الآلية الأساسية بواسطة الدالة document.startViewTransition()، والتي تأخذ دالة رد نداء (callback) تقوم بتحديث DOM إلى الحالة الجديدة.

مثال:

 document.startViewTransition(() => {
  // تحديث DOM إلى الحالة الجديدة
  updateTheDOM();
 });

قوة الخاصية view-transition-name

خاصية CSS view-transition-name هي الأساس لتحديد العناصر التي يجب أن تشارك في انتقال العرض. تعتبر العناصر التي لها نفس قيمة view-transition-name مرتبطة منطقيًا عبر الحالات المختلفة. يقوم المتصفح بعد ذلك تلقائيًا بإنشاء عناصر زائفة (pseudo-elements) تمثل الحالتين 'القديمة' و 'الجديدة' لهذه العناصر، مما يسمح لك بتطبيق الحركات عليها.

مثال:

.card {
  view-transition-name: card-element;
}

في هذا المثال، سيتم التقاط حالة جميع العناصر التي تحمل الصنف 'card' قبل وبعد تحديث DOM وستشارك في انتقال إذا ظلت قيمة view-transition-name الخاصة بها متسقة عبر التحديثات.

ربط أنواع الحركات: تقديم view-transition-class

ربط أنواع الحركات، الذي يتم تحقيقه بشكل أساسي من خلال خاصية CSS view-transition-class، هو المفتاح لتخصيص الحركات المطبقة أثناء انتقالات العرض. يسمح لك بتحديد حركات مختلفة لعناصر مختلفة بناءً على أدوارها أو أنواعها داخل الانتقال. فكر في الأمر على أنه تعيين "أدوار" حركية لأجزاء مختلفة من الانتقال.

يتم تعيين خاصية view-transition-class إلى عنصر تمامًا مثل أي خاصية CSS أخرى. القيمة هي سلسلة نصية، ثم يتم استخدام هذه السلسلة لتحديد العناصر الزائفة ::view-transition-* المناسبة في CSS الخاص بك.

تأتي القوة الحقيقية عندما تجمع بين view-transition-class والعناصر الزائفة ::view-transition-group و ::view-transition-image-pair و ::view-transition-new و ::view-transition-old.

فهم العناصر الزائفة

• ::view-transition-group(view-transition-name): يمثل مجموعة تحتوي على كل من الحالتين القديمة والجديدة لعنصر له قيمة view-transition-name المحددة. هذا هو الحاوية الرئيسية للانتقال.
• ::view-transition-image-pair(view-transition-name): يغلف كل من الصور القديمة والجديدة عندما يتضمن انتقال العرض صورة. هذا يسمح بحركات متزامنة بين الصورة القديمة والجديدة.
• ::view-transition-new(view-transition-name): يمثل الحالة *الجديدة* للعنصر.
• ::view-transition-old(view-transition-name): يمثل الحالة *القديمة* للعنصر.

أمثلة عملية لربط أنواع الحركات

دعنا نستكشف بعض الأمثلة العملية لتوضيح كيفية عمل ربط أنواع الحركات في الممارسة.

المثال 1: ظهور المحتوى الجديد تدريجياً (Fade In)

لنفترض أن لديك قائمة من العناصر، وتريد أن تظهر العناصر الجديدة تدريجياً عند إضافتها. يمكنك استخدام view-transition-class و ::view-transition-new لتحقيق ذلك.

HTML:

<ul id="item-list">
  <li class="item" style="view-transition-name: item-1;">العنصر 1</li>
  <li class="item" style="view-transition-name: item-2;">العنصر 2</li>
</ul>

JavaScript (لإضافة عنصر جديد):

function addNewItem() {
  document.startViewTransition(() => {
    const newItem = document.createElement('li');
    newItem.classList.add('item');
    newItem.style.viewTransitionName = `item-${Date.now()}`;
    newItem.style.viewTransitionClass = 'new-item'; // تعيين الصنف
    newItem.textContent = 'عنصر جديد';
    document.getElementById('item-list').appendChild(newItem);
  });
}

CSS:

::view-transition-new(item-*) {
  animation: fade-in 0.5s ease-in-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

في هذا المثال، نقوم بتعيين الصنف 'new-item' لعنصر القائمة الجديد قبل انتقال العرض. ثم يستهدف CSS العنصر الزائف ::view-transition-new (المطابق للاسم `item-*` من نمط `view-transition-name`) ويطبق حركة الظهور التدريجي. لاحظ كيف أن الصنف `new-item` نفسه *لا* يستخدم في محدد CSS. قيمة الخاصية view-transition-class مهمة فقط عند التفكير في العنصر *الفعلي* الذي تقوم بتعيينها عليه.

المثال 2: انزلاق المحتوى القديم للخارج

بناءً على المثال السابق، دعنا نجعل العناصر القديمة تنزلق للخارج بينما يظهر العنصر الجديد تدريجياً.

JavaScript (كما في السابق):

function addNewItem() {
  document.startViewTransition(() => {
    const newItem = document.createElement('li');
    newItem.classList.add('item');
    newItem.style.viewTransitionName = `item-${Date.now()}`;
    newItem.style.viewTransitionClass = 'new-item'; // تعيين الصنف
    newItem.textContent = 'عنصر جديد';
    document.getElementById('item-list').appendChild(newItem);
  });
}

CSS:

::view-transition-new(item-*) {
  animation: fade-in 0.5s ease-in-out;
}

::view-transition-old(item-*) {
  animation: slide-out 0.5s ease-in-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

هنا، أضفنا حركة إلى العنصر الزائف ::view-transition-old، مما يتسبب في انزلاق العنصر القديم إلى اليسار أثناء التلاشي. لاحظ مرة أخرى أن view-transition-class ذات صلة فقط بالعنصر *الجديد* الذي نضيفه؛ فهي لا تؤثر على العناصر *القديمة* الموجودة بالفعل على الصفحة والمشاركة في الانتقال.

المثال 3: انتقال تنقل أكثر تعقيدًا

لنتخيل تطبيق صفحة واحدة (SPA) به قائمة تنقل. عندما ينقر المستخدم على عنصر في القائمة، يجب أن تنتقل منطقة المحتوى بسلاسة إلى الصفحة الجديدة. يمكننا استخدام view-transition-class للتمييز بين مناطق الرأس والمحتوى، وتطبيق حركات مختلفة على كل منهما.

HTML (مبسط):

<header style="view-transition-name: header; view-transition-class: header-transition;">
  <h1>موقعي</h1>
</header>
<main style="view-transition-name: content; view-transition-class: content-transition;">
  <p>المحتوى الأولي</p>
</main>

JavaScript (مبسط):

function navigateTo(pageContent) {
  document.startViewTransition(() => {
    document.querySelector('main').innerHTML = pageContent;
  });
}

CSS:

::view-transition-old(header) {
  animation: fade-out 0.3s ease-in-out;
}

::view-transition-new(header) {
  animation: fade-in 0.3s ease-in-out;
}

::view-transition-old(content) {
  animation: slide-out-left 0.5s ease-in-out;
}

::view-transition-new(content) {
  animation: slide-in-right 0.5s ease-in-out;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-out-left {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

في هذا السيناريو، يتلاشى الرأس ويظهر، بينما ينزلق المحتوى للداخل من اليمين وللخارج إلى اليسار، مما يخلق تجربة تنقل ديناميكية وجذابة. لقد حققنا ذلك من خلال تطبيق الصنفين header-transition و content-transition، مما سمح لنا باستهداف مناطق الرأس والمحتوى بشكل منفصل بحركات مختلفة.

أفضل الممارسات لاستخدام ربط أنواع الحركات

للاستفادة الفعالة من ربط أنواع الحركات، ضع في اعتبارك أفضل الممارسات التالية:

• خطط لانتقالاتك: قبل تنفيذ أي انتقالات، خطط بعناية للحركات المطلوبة وكيف ستعزز تجربة المستخدم. فكر في تدفق المعلومات وكيفية توجيه المستخدم بصريًا خلال التغييرات.
• استخدم أسماء أصناف وصفية: اختر أسماء أصناف تشير بوضوح إلى دور العنصر في الانتقال (مثل 'new-item'، 'old-item'، 'header-transition'). هذا يحسن قابلية قراءة الكود وصيانته.
• اجعل الحركات موجزة: تجنب الحركات المعقدة أو الطويلة بشكل مفرط والتي يمكن أن تشتت انتباه المستخدم أو تبطئ التطبيق. استهدف انتقالات سلسة ودقيقة تعزز تجربة المستخدم بدلاً من إعاقتها. العين البشرية حساسة للتأخيرات التي تزيد عن بضع مئات من الميلي ثانية، لذا حافظ على سرعة الانتقالات.
• اختبر بدقة: اختبر انتقالاتك على أجهزة ومتصفحات مختلفة للتأكد من أنها تعمل بشكل صحيح وسلس. انتبه إلى الأداء، خاصة على الأجهزة المحمولة.
• ضع إمكانية الوصول في الاعتبار: كن على دراية بالمستخدمين الذين يعانون من حساسية الحركة. وفر خيارًا لتعطيل الحركات أو تقليل شدتها. يمكن استخدام استعلام الوسائط prefers-reduced-motion لاكتشاف ما إذا كان المستخدم قد طلب تقليل الحركة في إعدادات نظام التشغيل الخاص به.
• استخدم التتالي (Cascade) بفعالية: استفد من تتالي CSS لإدارة الحركات. حدد خصائص الحركة الشائعة في صنف أساسي ثم قم بتجاوز خصائص معينة لحالات انتقال العرض المختلفة.

تقنيات متقدمة واعتبارات

التعيين الديناميكي للأصناف

بينما تستخدم الأمثلة أعلاه الأنماط المضمنة لـ view-transition-name و view-transition-class، فمن المحتمل في التطبيقات الحقيقية أن ترغب في إدارة هذه بشكل ديناميكي باستخدام JavaScript. هذا يسمح لك بتطبيق أصناف مختلفة بناءً على تغيير الحالة المحدد أو تفاعل المستخدم.

مثال:

function updateContent(newContent, transitionType) {
  document.startViewTransition(() => {
    const mainElement = document.querySelector('main');
    mainElement.innerHTML = newContent;

    // إزالة أي أصناف انتقال موجودة
    mainElement.classList.remove('slide-in', 'fade-in');

    // إضافة صنف الانتقال المناسب
    if (transitionType === 'slide') {
      mainElement.classList.add('slide-in');
    } else if (transitionType === 'fade') {
      mainElement.classList.add('fade-in');
    }
  });
}

يوضح هذا المثال كيفية إضافة أصناف CSS ديناميكيًا للتحكم في الحركة بناءً على نوع الانتقال المطلوب.

العمل مع المكونات المعقدة

عند التعامل مع مكونات معقدة، قد تحتاج إلى تعيين قيم متعددة لـ view-transition-name و view-transition-class لعناصر مختلفة داخل المكون. هذا يسمح لك بإنشاء انتقالات أكثر دقة وتحكمًا.

مثال:

<div style="view-transition-name: component;">
  <h2 style="view-transition-name: component-title; view-transition-class: title-transition;">عنوان المكون</h2>
  <p style="view-transition-name: component-content; view-transition-class: content-transition;">محتوى المكون</p>
</div>

في هذا المثال، يحتوي المكون نفسه على view-transition-name، وكذلك عنصري العنوان والمحتوى. يتيح لك ذلك تحريك المكون بأكمله كوحدة واحدة، مع تطبيق حركات محددة على العنوان والمحتوى بشكل فردي أيضًا.

التعامل مع العمليات غير المتزامنة

إذا كان تحديث الحالة الخاص بك يتضمن عمليات غير متزامنة (مثل جلب البيانات من واجهة برمجة تطبيقات)، فستحتاج إلى التأكد من تنفيذ دالة رد النداء document.startViewTransition() *بعد* اكتمال العملية غير المتزامنة. يمكن تحقيق ذلك باستخدام Promises أو async/await.

مثال:

async function updateContentAsync(newContentUrl) {
  document.startViewTransition(async () => {
    const response = await fetch(newContentUrl);
    const newContent = await response.text();
    document.querySelector('main').innerHTML = newContent;
  });
}

التوافق عبر المتصفحات والبدائل (Polyfills)

حتى أواخر عام 2024، تتمتع انتقالات العرض في CSS بدعم جيد في المتصفحات الحديثة مثل Chrome و Edge و Firefox. ومع ذلك، قد تتطلب المتصفحات القديمة أو Safari بدائل (polyfills) لتوفير الدعم. قبل النشر في بيئة الإنتاج، من الضروري اختبار انتقالاتك عبر متصفحات مختلفة والنظر في استخدام بديل مثل الذي توفره مبادرة Open UI إذا لزم الأمر.

تحقق من دعم المتصفح الحالي على مواقع مثل caniuse.com قبل تنفيذ انتقالات العرض في CSS على نطاق واسع.

مستقبل انتقالات العرض

تمثل انتقالات العرض في CSS خطوة مهمة إلى الأمام في مجال حركات الويب وتجربة المستخدم. مع تطور المواصفات وتوسع دعم المتصفحات، يمكننا أن نتوقع رؤية استخدامات أكثر تطورًا وإبداعًا لهذه التقنية. راقب الميزات والتحديثات القادمة لواجهة برمجة تطبيقات انتقالات العرض لتبقى في الطليعة.

الخاتمة

يعد ربط أنواع الحركات، الذي تسهله خاصية view-transition-class، جانبًا حاسمًا في إتقان انتقالات العرض في CSS. من خلال فهم كيفية تعيين "أدوار" حركية مختلفة للعناصر باستخدام الأصناف واستهدافها بالعناصر الزائفة ::view-transition-*، يمكنك إنشاء انتقالات مذهلة وجذابة تعزز تجربة المستخدم لتطبيقات الويب الخاصة بك. تذكر أن تخطط لانتقالاتك بعناية، وتستخدم أسماء أصناف وصفية، وتحافظ على إيجاز الحركات، وتختبر بدقة، وتأخذ إمكانية الوصول في الاعتبار. مع وضع هذه المبادئ في الاعتبار، يمكنك إطلاق العنان للإمكانات الكاملة لانتقالات العرض في CSS وإنشاء تجارب ويب رائعة حقًا للمستخدمين في جميع أنحاء العالم.

يمكن للتطبيق الدقيق لانتقالات العرض في CSS والفهم القوي لربط أنواع الحركات أن يحسن بشكل كبير الأداء الملموس والصقل العام لموقعك أو تطبيق الويب الخاص بك. يترجم هذا إلى مستخدمين أكثر سعادة وعرض أكثر احترافية للمحتوى الخاص بك. جرب أنواعًا مختلفة من الحركات ومدد الانتقال للعثور على التوازن المثالي لاحتياجاتك الخاصة. برمجة سعيدة!