الانتقالات وجافاسكربت

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

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

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

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

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

يتألف هذا المثال من زر ومحتوى مُتضمَّن في عنصر 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`;