الآن في خط الأساس: تأثيرات الدخول المتحركة

Una Kravets

تمت إضافة بعض الميزات المفيدة التي تمت إضافتها إلى Chrome من خلال أربع ميزات CSS جديدة لتأثيرات الإدخال والخروج. والآن، أصبحت اثنتان من هاتين الميزتَين، @starting-style وtransition-behavior: allow-discrete، متوفّرتَين من قِبل Baseline متوفّر حديثًا مع إصدار Firefox 129. يمكنك الآن إنشاء تأثيرات متحركة لإدخال العناصر، بما في ذلك العناصر المتحركة من display: none، وإضافة تأثيرات متحركة إلى الطبقة العليا.

جارٍ إعداد تأثيرات الإدخال باستخدام @starting-style

تحدّد القاعدة @starting-style الأنماط الأولية لعنصر قبل عرضه على الصفحة. هذا الإجراء مطلوب للعناصر التي تتحرك من display: none، لأنها تحتاج إلى حالة يمكن فيها التحريك.

يمكنك استخدام @starting-style مثل أي قاعدة أخرى في CSS من خلال وضع أنماط العنصر داخلها. على سبيل المثال، باستخدام <dialog>، يمكنك وضع أنماط dialog[open] ضمن القاعدة @starting-style. وهذه هي الأنماط المستخدمة قبل فتح مربع الحوار.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

تفعيل الصور المتحركة المنفصلة باستخدام allow-discrete

والشيء الثاني اللازم لتوفير الصور المتحركة للإدخال في العناصر التي تتحرك من display: none، مثل مربعات الحوار والنوافذ المنبثقة، هو تفعيل وضع صورة متحركة جديد لإتاحة حركة الخصائص المنفصلة. الخصائص المنفصلة هي تلك التي لا يمكن أن تتداخل بين القيم. يمكنك اعتبارها بمثابة مفتاح تشغيل/إيقاف. تشمل بعض الأمثلة display وvisibility وmix-blend-mode، أي سمة يكون فيها العنصر قيمة أو أخرى. يتيح وضع الصور المتحركة الجديد هذا في المتصفح الآن تبديل القيم عند نقطة 50% بدلاً من عند نقطة 0% من الانتقال.

يمكنك استخدام إحدى الطريقتَين التاليتَين لإضافة تأثيرات متحركة لتأثيرات الإدخال للعناصر display: none وvisibility: hidden:

• السمة المستقلة transition-behavior بالقيمة allow-discrete
• قيمة allow-discrete في اختصار النقل.

وننصح باستخدام الطريقة الثانية، لأنّ تطبيق transition-behavior يتم تضمينه ضمن اختصار transition. في حال تطبيق transition-behavior: allow-discrete قبل اختصار الانتقال حيث يتم تطبيق وظائف الانتقال والتوقيت والتخفيف، سيتجاهل المتصفّح transition-behavior.

في حال استخدام هذه الكلمة الرئيسية باختصار، ما عليك سوى تطبيق الكلمة الرئيسية allow-discrete على السمات المحدّدة التي تتطلّب صورًا متحركة منفصلة. يتضّح ذلك في لغة CSS التالية التي تنقل كلّ من السمة translate والسمة display، ولكنّها تطبّق الكلمة الرئيسية allow-discrete على السمة display فقط.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

العرض التوضيحي: وضع كل شيء معًا

ويكون استخدام هذه الميزات مفيدًا بشكل خاص لعناصر الطبقة العليا، مثل عنصر <dialog> أو المكوّنات التي تستخدم السمة popover. في المثال التالي، تظهر صورة متحركة لعنصر <dialog> من أسفل إطار العرض (تبدأ في البداية من الترجمة العمودية بقوة 100vh من خارج الشاشة) وصولاً إلى وسط إطار العرض، ما يؤدي إلى إزالة الترجمة عند فتح <dialog>.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

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

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

الخاتمة

من المشوّق أن نرى تقدّمًا كهذا في المستوى الأساسي، وعلى الأقل هو تحسين تدريجي لهذه العناصر. بدون ميزات تأثير الدخول هذه، ستظهر العناصر التي تتحرك في الطبقة العلوية أو من نمط display: none على صفحتك بدون تأثير الانتقال، كما هي الحال في الوقت الحالي.

للتعرّف على كيفية إضافة تأثيرات الخروج بطريقة محسَّنة تدريجيًا، يُرجى الاطّلاع على المقالة "أربع ميزات CSS جديدة لإنشاء صور متحركة عند الدخول والخروج بسلاسة"، وللتعرّف على مزيد من المعلومات حول هذه الميزات، يُرجى الاطّلاع على مراجع الوثائق التالية:

• @starting-style على MDN
• الانتقال إلى السلوك في MDN