التحريك باستعمال css3 عوضا عن jQuery

الكثير منا يستعمل jQuery لعمل الكثير من الحركات البسيطة التي يمكن الاستغناء عنها لا أقول بالقليل من جافاسكربت بل بالقليل من css!!

كل ما عليك هو وضع ال class التالي في css وتطبيقه على الكائن المراد تحريكه

.ani {
-moz-transition: all 0.75s ease;
-webkit-transition: all 0.75s ease;
-ms-transition: all 0.75s ease;
-o-transition: all 0.75s ease;
transition: all 0.75s ease;
}

يمكنك وضع أي مدة زمنية مكان 0.75 ثانية. بعدها ستجد أن أي تغير (تقريبا) تقوم به عبر جافاسكربت أو عبر إعطاؤه class جديد سيتم بالتدريج في حركة تستمر المدة الزمنية المطلوبة.

لقد أعددت مثال واف يوضح ذلك انقر على الرابط أدناه

• some css3-based animations

انقر على الروابط في المربع الأسفل الأيمن لرؤية الحركة كذلك انقر بالزر الأيمن على الصندوق الأخضر ثم اختر inspect element وغيير الصنف class من ani box1 إلى ani box2 وشاهد الحركة.

لاحظ أننا لم نستخدم أي مكتبة js. هذه الطريقة استعملتها في عمل حركة الانتقال بين صفحات التطبيق الذي عمله لجهاز الأندرويد باستعمال phonegap (التطبيق لا يعمل شيء لكنه مجرد تجربة).