عمليات نقل العرض للتطبيقات المكوّنة من صفحة واحدة

من الأنماط الشائعة لصفحات الويب استخدام JavaScript لاستبدال المحتوى بشكل ديناميكي على الصفحة، بدون تحميل مستند HTML جديد وكامل. يُعرف هذا باسم تطبيق من صفحة واحدة أو SPA. توفّر لك عمليات انتقال العرض طريقة لإظهار الاستمرارية أو السياق بين الصفحات في تطبيقك ذي الصفحة الواحدة.

عمليات الانتقال بين الصفحات

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

تعرض عمليات الانتقال غالبًا كلاً من العرض القديم والجديد في الوقت نفسه، مثلاً من خلال إخفاء العرض القديم تدريجيًا وإظهار العرض الجديد تدريجيًا. بما أنّه يتم استبدال المحتوى الحالي، كان ذلك يمثّل تحديًا قبل استخدام ميزة "انتقالات العرض".

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

document.startViewTransition(() => updateTheDOMSomehow());

يتيح ذلك الانتقال التلقائي، ما يؤدي إلى تلاشي العرض القديم تدريجيًا وظهور العرض الجديد تدريجيًا.

ما الذي يحدث هنا؟ عند الاتصال بـ document.startViewTransition()، يأخذ المتصفّح لقطة للشاشة القديمة. بعد ذلك، يتم استدعاء دالة رد الاتصال التي تمرّرها، والتي تعدّل نموذج DOM إلى العرض الجديد (ولكن لا يتم عرضه بعد). عند اكتمال دالة رد الاتصال، يبدأ المتصفّح في الانتقال إلى المحتوى الجديد.

// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
  updateTheDOMSomehow();
  return;
} else {
  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

تخصيص الانتقال

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

يمكنك تحديد الانتقال عند المغادرة باستخدام ::view-transition-old() والانتقال عند الدخول باستخدام ::view-transition-new(). يمكنك أيضًا تحديد قيم لكليهما باستخدام ::view-transition-group().

في هذا المثال، سيتم الانتقال من العرض القديم باستخدام الانتقال slide-out-to-left وسيتم الانتقال إلى العرض الجديد باستخدام الانتقال slide-in-from-right. سيكون لكل منهما مدة 200 ملي ثانية.

::view-transition-group(root){
  animation-duration: 200ms;
}

::view-transition-old(root) {
  animation-name: slide-out-to-left;
}

::view-transition-new(root) {
  animation-name: slide-in-from-right;
}

انتقالات مختلفة استنادًا إلى السياق

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

يمكنك تحديد رسوم متحركة مختلفة باستخدام الفئة الزائفة :active-view-transition-type().

html:active-view-transition-type(forwards) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-left;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-from-right;
  }
}

يمكنك بعد ذلك اختيار نوع انتقال العرض الذي تريد استخدامه عند استدعاء document.startViewTransition().

const direction = next === 'home' ? 'backwards' : 'forwards';

document.startViewTransition({
  update: updateTheDOMSomehow,
  types: [direction],
});

انتقال عناصر معيّنة

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

على سبيل المثال، قد يتطابق المحتوى في طريقة العرض القديمة مع المحتوى في طريقة العرض الجديدة. يمكن أن يكون هذا العنوان هو عنوان المحتوى أو صورة. قد تكون صورة مصغّرة في العرض القديم وفيديو في العرض الجديد.

أولاً، عليك تحديد العناصر التي تريد تطبيق الانتقال عليها باستخدام السمة view-transition-name. لكي تعمل انتقالات العرض، يجب أن يكون هناك عنصر واحد بالضبط لكل view-transition-name قبل استدعاء document.startViewTransition() وعنصر واحد بالضبط بعد اكتمال معاودة الاتصال في document.startViewTransition().

في هذا المثال، يظهر مشغّل موسيقى يعرض صورة الألبوم والعنوان والفنان. يعرض المنظر البديل المحتوى نفسه مع إعادة ترتيبه وإضافة كلمات الأغنية.

في المثال السابق، يتوفّر عنصر واحد بالضبط من كل العناصر التي تم الانتقال إليها في العرض القديم والجديد، كما أنّها تشترك في المحددات نفسها. تظهر العناصر المنتقلة وكأنّها تتحرّك بين أحجامها ومواضعها. تتلاشى الأجزاء غير المنتقلة من طريقة العرض تدريجيًا.

إليك مثالاً أكثر تعقيدًا. على سبيل المثال، قد تعرض الصفحة الرئيسية في مدونة ما عنوانًا رئيسيًا وصورة لكل مشاركة، وتظهر هذه العناصر أيضًا في عرض الصفحة الكاملة لمشاركة في المدونة. عند الانتقال من الصفحة الرئيسية إلى مشاركة معيّنة، قد تريد أن يظهر العنوان والصورة وكأنّهما ينتقلان إلى موقعهما الجديد لتوفير السياق.

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

لديك خياران لحلّ هذه المشكلة. يمكنك اختيار إضافة view-transition-name فريد لكل مشاركة على الصفحة الرئيسية، ثم مطابقة هذا الاسم مع كل مشاركة على الصفحة الكاملة. يمكنك إنشاء هذه الروابط باستخدام معرّف المشاركة. يمكنك أيضًا استخدام view-transition-name عام، ولكن لا تطبّقه إلا بعد أن ينقر المستخدم على مشاركة، ولكن قبل استدعاء document.startViewTransition().

تصميم الانتقالات

عمليات انتقال العرض هي مجموعة من الأدوات التي يمكنك استخدامها لتوجيه المستخدمين وتقديم تلميحات إضافية حول العلامة التجارية أو السياق. من المحتمل أن تستخدم تقنيات متعددة للعثور على عمليات الانتقال التي تناسب موقعك الإلكتروني.

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

يحتوي العنوان على القاعدة width: fit-content، وهو نمط مفيد عند نقل نص لا يتم التفافه (أو له التفاف مماثل في كل من العرض القديم والجديد). وإلا، قد يكون الانتقال بين عناصر ذات عروض مختلفة، ما سيجعل الانتقال أقل سلاسة.

تختلف أيضًا نسبة العرض إلى الارتفاع للصورة في العرض القديم والعرض الجديد. يعدّل المثال الحركة وسمة object-fit لكي يبدو الانتقال سلسًا.

احترام prefers-reduced-motion

من الأسباب الشائعة التي تدفع المستخدمين إلى طلب تقليل الحركة أنّ الصور المتحركة بملء الشاشة، مثل تلك التي يمكن تحقيقها باستخدام انتقالات العرض، يمكن أن تسبّب عدم راحة للأشخاص الذين يعانون من اضطرابات الحركة الدهليزية. يمكنك إيقاف الصور المتحركة باستخدام طلب البحث عن الوسائط prefers-reduced-motion. يمكنك أيضًا اختيار تقديم رسوم متحركة بديلة أكثر دقة، ولكنها لا تزال توضّح كيفية ربط العناصر.

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

التحقّق من فهمك