تحديث المتغيرات مع الانتقالات | الأنماط الديناميكية في لغة CSS

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تصبح الأزرار والروابط التفاعلية أسهل بكثير في الصيانة عندما تقتصر الحالات التفاعلية على تحديث المتغيرات بدلاً من إعادة كتابة الخصائص الطويلة. ففي الصنف الأساسي .action-btn تربط transform: translateY(var(--btn-y)) ولون الخلفية var(--btn-bg) والظل ومؤشر اليد cursor: pointer مع انتقال سلس عبر transition.

وبعد ذلك تكتفي حالات :link و:visited و:hover و:focus و:active بتغيير قيمة المتغير فقط؛ فيرتفع الزر بمقدار -2px عند التمرير، ويظهر إطار تركيز واضح عبر outline للوحة المفاتيح، ويهبط إلى 1px لحظة الضغط الفعلي لإعطاء إحساس ملموس بالاستجابة.

الصف 2 كود برمجي

CSS

.action-btn {
  --btn-bg: #6d44a8;
  --btn-y: 0px;
  background-color: var(--btn-bg);
  transform: translateY(var(--btn-y));
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.action-btn:hover { --btn-bg: #58338f; --btn-y: -2px; }
.action-btn:active { --btn-y: 1px; }

جرّب بنفسك

الصف 3 ملاحظة هامة

State Driven Tokens With Transitions تحديث المتغيرات مع الانتقالات

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (الأنماط الديناميكية في لغة CSS)