منع بدء انتقال CSS عند تحميل الصفحة

في مواقف معينة، قد يتم تنشيط انتقالات CSS عن غير قصد أثناء تحميل الصفحة، مما يتسبب في وميض العناصر. يمكن أن تنشأ هذه المشكلة عند تطبيق انتقالات الألوان على العناصر.

حسب المثال المقدم:

CSS:

p.green {
   color: green;
   transition: color .2s;
}

p.green:hover {
   color: yellow;
}

HTML:

<p class="green">The Flashing Text</p>

عند تحميل الصفحة، ينتقل النص الموجود داخل العنصر

من الأسود (اللون الأولي) إلى الأخضر. هذا السلوك غير مرغوب فيه ويمكن أن يكون مزعجًا بصريًا.

لمنع هذا النقل غير المقصود، يتضمن الحل الاستفادة من جانب فريد من سلوك Chrome. عندما تحتوي الصفحة على عنصر

<script> </script>

يعالج هذا الحل البديل البسيط الخلل في Chrome من خلال توفير عنصر