عند التحقق من الكود المقدم، يظهر أن الانتقال بين عرض عناصر القائمة الفرعية (subnav
) من display: none;
إلى display: block;
لا ينتج عنه تأثير انتقالي مرئي. يعود ذلك إلى كون خاصية display
لا تستجيب للانتقالات (transitions
) بشكل مباشر.
بمعنى آخر، عندما يتغير قيمة display
من none
إلى block
، يتم عرض العنصر فورًا دون أي تأثير انتقالي. ومع ذلك، يمكن تحقيق التأثير المطلوب باستخدام خاصية أخرى مثل opacity
، حيث يمكن التحكم في مستوى الشفافية للعنصر وبالتالي إنشاء تأثير انتقالي.
لتحقيق ذلك، يمكننا تغيير خاصية opacity
بدلاً من display
في قاعدة النمط لعناصر القائمة الفرعية عند تحويل العرض. يجب أولاً تعيين قيمة opacity
إلى 0
عندما يكون العنصر غير مرئي (display: none;
)، ثم تحويل قيمة opacity
إلى 1
عند ظهور العنصر (display: block;
). هذا سيتيح للانتقال المنسق بين الحالتين.
لتطبيق هذا التغيير، يمكن تعديل قاعدة النمط كما يلي:
cssnav.main ul ul {
position: absolute;
list-style: none;
display: block; /* تم تغيير العرض إلى block */
opacity: 0; /* تم إضافة خاصية الشفافية وتعيينها إلى 0 */
visibility: hidden;
padding: 10px;
background-color: rgba(92, 91, 87, 0.9);
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
visibility: visible;
opacity: 1; /* تم تغيير الشفافية إلى 1 عند التحويل */
}
بتطبيق هذه التغييرات، يجب أن تعمل الانتقالات كما هو متوقع، حيث ستتلاشى القوائم الفرعية بلطف بين الظهور والاختفاء.
المزيد من المعلومات
بالطبع، هنا بعض المعلومات الإضافية حول الانتقالات وكيفية تطبيقها بشكل فعال في CSS:
-
انتقالات CSS:
- الانتقالات هي طريقة تسمح بتحديد التغييرات التدريجية في الخصائص CSS على مرور الوقت.
- يمكن استخدام الانتقالات لإضافة لمسة رائعة إلى التجربة المستخدم لتحسين تجاوب وتفاعل المواقع والتطبيقات.
-
خصائص قابلة للانتقال:
- ليست جميع الخصائص CSS قابلة للانتقال. بعض الخصائص مثل
display
وposition
لا تستجيب للانتقالات مباشرة. - الخصائص الأكثر استخدامًا في الانتقالات هي
opacity
،transform
،width
،height
،color
،background-color
، وغيرها.
- ليست جميع الخصائص CSS قابلة للانتقال. بعض الخصائص مثل
-
تطبيق الانتقالات:
- لتطبيق الانتقالات، يجب تحديد الخاصية التي ترغب في تغييرها، ومدة الانتقال، ونوع التأثير (مثل الخطي أو التسارعي) في قاعدة النمط.
- يمكن تطبيق الانتقالات بشكل متفاوت على مختلف الحالات مثل تحويلات الفأرة، التغييرات في الحالة، أو تحميل الصفحة.
-
مفهوم الشفافية (Opacity):
- تسمح خاصية
opacity
بتحديد مدى شفافية العنصر، حيث تتراوح قيمتها بين 0 (تمامًا غير مرئي) و 1 (تمامًا مرئي). - باستخدام الانتقالات مع
opacity
، يمكن إنشاء تأثيرات تتلاشى وظهور لطيفة ومتناغمة.
- تسمح خاصية
-
العناصر المخفية والظاهرة:
- يمكن استخدام خصائص
visibility
وdisplay
للتحكم في رؤية العناصر على الصفحة. - على الرغم من أن
display
يحدد إذا كان العنصر موجودًا في التخطيط أم لا، إلا أنvisibility
تحدد ما إذا كان العنصر مرئيًا أم لا دون تغيير تأثير النمط الذي يؤثر على تدفق الوثيقة.
- يمكن استخدام خصائص
باستخدام هذه المعلومات، يمكنك تحقيق تأثيرات انتقالية رائعة في تصميمات CSS الخاصة بك، مما يعزز تجربة المستخدم ويضيف لمسة من الديناميكية والإثارة إلى موقعك أو تطبيقك.