الوسم: best practice

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله و على آله و صحبه و من والاه بإحسان إلى يوم الدين.

إليكم تلميحاً سريعاً في الحركة الانتقالية CSS3 Transitions وهي الفرق بين استخدام الحركة الانتقالية (وأعني باستخدامها مكان وضع الكود)في الوضع العادي {}div أم في وضع مرور الماوس {}div:hover سنطبق الحركة على الصندوقين بالأسفل. سنعطي الصندوقين أسماء تعريفية مختلفة ID سيكون للصندوق الأول (square1) وللثاني (square2) ونضيف لهما وضع مرور الماوس :hover.سنأخذ كود الحركة من موقع css3please.com حيث سنقوم بنسخ كود الحركة الموجود داخل {}box_transition. ونلاحظ الفرق في الحركة الانتقالية عند استخدامها مع الوضع العادي أو في وضع الـ :hover.

.box{/* هذا هو الشكل العام لكلا الصندوقين*/
display:inline-block;
background-color:brown;
color:white;
padding:10px;
margin-right:10px;
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px;
}

#square1{
/* كود الحركة الانتقالية */
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;  
-ms-transition: all 0.3s ease-out;  
-o-transition: all 0.3s ease-out;  
transition: all 0.3s ease-out;  
}
#square1:hover{
background-color:green;
}

#square2{}

// :hover نلاحظ كود الحركة موجود في 
#square2:hover{
background-color:green;
/* كود الحركة الانتقالية */
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;  
-ms-transition: all 0.3s ease-out;  
-o-transition: all 0.3s ease-out;  
transition: all 0.3s ease-out;  
}

نلاحظ أن استخدام كود الحركة مع الوضع العادي normal state يسمح بالحركة الانتقالية بالاتجاهين أي عند مرور الماوس و خروجه،أما وضع الكود داخل وضع الـ :hover فهو يسمح بالحركة فقط باتجاه واحد.
كانت هذا تلميحاً سريعاً نتمنى أن يكون مفيداً.
ودمتم..

وصلى اللهم و سلم وبارك على سيدنا محمد و على آله و صحبه و سلم تسليما كثيرا إلى يوم الدين والحمدلله رب العالمين