محمد الميداوي

استخدمنا في المقالات السابقة الخاصية transition للقيام بالتحريك بين حالتين، حالة عدم التحويم (non-hover state) وحالة التحويم (hover state).

تحدُث تلك الانتقالات عند التحويم (تمرير مؤشر الفأرة) فوق العنصر. بيْد أنّ هذه ليست الطريقة الوحيدة لبدء التحريك، سنغطي في هذه المقالة طريقتين لفعل ذلك عبر استخدام JavaScript.

هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:

إضافة أو إزالة الأصناف

أهم ما يميّز الانتقالات هي قدرتها على التحريك بين حالتين، لذا يمكننا إنشاء تلك الحالات على هيئة أصناف (classes) منفصلة ثم نضيف أو نزيل تلك الأصناف باستخدام JavaScript.

js-triggered-button-min.gif
المصدر: http://codepen.io/donovanh/pen/YPbxqa

يتألف هذا المثال من زر ومحتوى مُتضمَّن في عنصر div. في البداية سيكون لحاوية المحتوى صنف hide. في CSS، الصنف hide له الخاصية opacity: 0;.

لدينا أيضًا صنف ثانٍ في CSS يُسمى show. هذه الصنف لديه عتامة (opacity) مساوية للقيمة 1.

عند النقر فوق الزر، يتراوح صنف العنصر div بين hide وshow. ولأجل تحريكه، فنحن نطبق عملية انتقال على العنصر div أيضًا.

يمكنك مطالعة هذا على CodePen.

إذا كنت ترغب في التعمق أكثر في الموضوع، فأنصحك بقراءة المقال Adding Appeal to Your Animations on the Web.

في نهاية هذا الدرس، سنتعلم كيفية إجراء الانتقالات والتحريكات أثناء التمرير (scrolling).

التحكم في الانتقالات عبر جافاسكربت

يمكننا القيام بأكثر من إضافة أو إزالة الأصناف. فيمكننا باستخدام JavaScript، ضبط خاصيات CSS مباشرة على النحو التالي:

element.style.transition = `opacity 1s ease-out`;

في هذه الحالة، يمثل element عنصرًا حددناه. على سبيل المثال، إذا كان لعنصر ما المُعرّف js-show، فيمكنك تطبيق الانتقال عليه باستخدام getElementById:

document.getElementById(`js-show`).style.transition = `opacity 1s ease-out`;

عندما تفعل ذلك، يجب ألا تنسَ تضمين بادئات المتصفحات (vendor prefixes) أيضًا. سيُكتب ما سبق على النحو التالي:

document.getElementById(`js-show`).style.webkitTransition = `opacity 1s ease-out`;
document.getElementById(`js-show`).style.transition = `opacity 1s ease-out`;

في هذا المثال، ستُطبّق webkitTransition على كل المتصفحات ذات البادئة -webkit- في CSS.

ملخص

درسنا في المقالات السابقة الخاصية transition، وتعلّمنا كيفية استخدامها لجعل المتصفح يحرِّك عنصرًا من حالة إلى أخرى.

ab.png
نقل عنصر من حالة إلى أخرى

وقد تعلمنا في ثنيّات الطريق عدَّة خاصيات، مثل: المدة (duration) والتأخير (delay) ودوال التوقيت (timing functions).

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

وأخيرًا، في هذه المقالة توّجنا ما سبق بتعلم كيفية تطبيق هذه الانتقالات باستخدام JavaScript.

الانتقالات ليست سوى جزء بسيط من التحريك في CSS. سنغطي في المقالات اللاحقة الخاصية animation.

تمرين

قبل أن ننتقل إلى الخاصية animation، خذ بعض الوقت للتفكير في كيفية استخدام الانتقالات.

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

المصادر

  • ترجمة وبتصرف للفصل transitions and javascript من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.

اقرأ أيضًا





تفاعل الأعضاء


لا توجد أيّة تعليقات بعد



يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن