جنبا إلى جنب مع إدخال CSS3 يأتي العديد من الميزات الجديدة المتوفرة للاستخدام في خلق تأثيرات كبيرة. واحدة من أكثر فائدة هي خاصية الانتقال .
الخاصية الانتقالية هي تطور جديد مهم في CSS. يمكن استخدامه لإنشاء تأثير تغيير ديناميكي على div أو class باستخدام بنية بسيطة:
transition: property duration timing-function delay;انتقال CSS3 هو وسيلة رائعة لإضافة القليل من الرسوم المتحركة إلى المواقع دون زيادة كبيرة في مكتبة جافا سكريبت مثل jQuery.
قبل أن نبدأ ، يمكنك رؤية عرض توضيحي هنا الخاصية الانتقالية في العمل .
أولاً ، لكي تعمل خاصية الانتقال ، يجب تحديد الخاصية القياسية التي سيتم تطبيقها عليها. يمكن القول إن الخصائص الأكثر شيوعًا التي سيتم تعريفها هي العرض والارتفاع. لكتابة الملكية المستقلة ببساطة استخدم:
transition-property: define propertyبعد ذلك ، بمجرد تحديد الخاصية ، يجب تحديد قيم البداية والنهاية. في حالة القيم مثل العرض أو الارتفاع ، يجب تعيين الخاصية بقيمة بدء ثم قيمة نهائية مع بعض الشروط الأخرى.
على سبيل المثال ، هنا نقوم بتعيين خاصية النقل إلى العرض ، ثم قيمة بدء العرض ، ثم تعيين القيمة النهائية عند تحريك العنصر فوق:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}الآن بعد أن حددنا الخاصية لتحويل قيم البداية والنهاية ، نحتاج إلى تحديد مدة الانتقال. يتم تحقيق ذلك عن طريق تحديد طول في أي من الثواني أو بالمللي ثانية على النحو التالي:
transition-duration: duration;بناء هذا في المثال يتم إنشاء التعليمات البرمجية التالية:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}وهذا يعني أنه سيتم توسيع div mainheader بمقدار 25 بكسل على مدار 5 ثوانٍ.
الشفرة كافية لخلق تأثير جيد ولكن يمكننا استخدام خاصية الانتقال CSS3 باستخدام وظيفة التوقيت باستخدام هذه الخاصية يمكن تغيير منحنى السرعة لمدة النقل. يتم تعيين خاصية النقل إلى منحنى خطي بشكل افتراضي. ومع ذلك ، يمكنك تحديد سهولة ، سهولة ، تخفيف ، تخفيف في الداخل ، وحتى بيزيك مكعب لتغيير منحنى السرعة. يتيح لك بيزيك المكعب تحديد قيمك الخاصة باستخدام (n، n، n، n) حيث يمكن أن يكون n بين 0 و 1 (على سبيل المثال ، يكون الخطي (0،0،1،1)).
إضافة هذا الرمز إلى نتائج مثالنا في:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}علاوة على ذلك ، يشبه إلى حد كبير انتقال مدة ، ويحدد استخدام خاصية تأخير النقل فترة توقف قبل بدء تأثير الانتقال:
transition-delay: time;أخيراً ، من المهم مراعاة شيئين عند استخدام الخاصية الانتقالية لـ CSS3. أولاً ، تتطلب معظم المتصفحات المتداولة في الوقت الحالي بادئة متصفح لاستخدامها (باستثناء IE10 و Opera و Firefox16 +):
الانتقال -moz: لمتصفح فايرفوكس 15
-webkit-transition: للمتصفح Chrome و Safari
(ضع في اعتبارك أن IE9 وأقل لا يدعم خاصية النقل على الإطلاق).
ثانيًا ، على الرغم من أني استخدمت اليد الطويلة في الأمثلة أعلاه من أجل الوضوح ، إلا أنه من الأفضل ممارسة الكتابة بشكل مختصر ، على النحو التالي:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}هل تستخدم خاصية النقل في CSS3؟ كيف يمكن مقارنته مع فتيات مراهقات مبني على jQuery؟ اسمحوا لنا أن نعرف في التعليقات.