لون خلفية .topic-body يتم تحميله بعد تأخير

الدعم
1

مرحباً،

أنا أستخدم خلفية داكنة مع .topic-body أبيض للتباين.

هذا هو CSS الذي أستخدمه:

html {
    background-color: #F5F5F5;
}
.topic-body {
    background-color: #fff;
}

ولكن كلما تمت إعادة تحميل الموقع، تظهر أولاً خلفية HTML، ثم يتم تحميل لون خلفية .topic-body.

هذا سيء لتجربة المستخدم.

هل هناك أي طريقة لإعطاء الأولوية للون خلفية .topic-body ليتم تحميله أولاً؟

أم هل هناك أي طريقة أخرى للقيام بذلك؟

هذه هي النتيجة النهائية التي أردتها وحصلت عليها:

6897e8f9-70a2-4469-9af0-45a5de0003ff
6897e8f9-70a2-4469-9af0-45a5de0003ff1098×657 73.2 KB

2

مرحباً، يجب عليك تجاوز keyframes أو إنشاء واحدة جديدة.
سيؤدي شيء مثل هذا إلى تغيير ألوان انتقال الرسوم المتحركة.

الإطار المفتاحي الافتراضي هو :arrow_down_small:

@keyframes background-fade-highlight {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: transparent;
  }
}

هذا يعني أنه يبرز من var(--tertiary-low) إلى transparent. وهو أمر رائع لأن لون خلفية Discourse الافتراضي هو الأبيض وجسم الموضوع ليس له خلفية، لذا سيكون الشفاف أبيض ولكن في حالتك المشكلة هي أن الخلفية مختلفة لذلك ينتقل أولاً إلى شفاف ثم بعد تأخير قصير سيصبح #fff (لون الخلفية الذي قمت بتعيينه لجسم الموضوع).

لذلك، تحتاج إلى تغيير الشفاف لجعل انتقال الألوان سلساً. يمكنك تجاوز الافتراضي ولكن ربما يكون من الأفضل إنشاء إطار مفتاحي جديد.

ملاحظة: إذا تجاوزت الإطار المفتاحي الافتراضي، فسيتم تغييره في كل مكان يستخدم فيه Discourse ليس فقط في جسم الموضوع. :arrow_down_small:

سيؤدي هذا إلى تجاوز الإطارات المفتاحية الافتراضية.

@keyframes background-fade-highlight {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

إذا كنت تريد إنشاء إطار مفتاحي جديد :arrow_down_small:

// Custom keyframes
@keyframes background-fade-highlight-custom {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

وأضف هذا الإطار المفتاحي إلى جسم الموضوع.

.topic-body {
  background-color: #fff;
  &.highlighted {
    animation: background-fade-highlight-custom 2.5s ease-out;
  }
}

الكود الكامل يبدو شيئاً كهذا. :arrow_down_small:

body {
  background-color: #F5F5F5;
}

.topic-body {
  background-color: #fff;
  &.highlighted {
    animation: background-fade-highlight-custom 2.5s ease-out;
  }
}

// Custom keyframes
@keyframes background-fade-highlight-custom {
  0% {
    background-color: var(--tertiary-low);
  }
  100% {
    background-color: #fff;
  }
}

قبل

بعد

10 إعجابات
3

يعمل بشكل مثالي!

شكراً لك @Don

لا بد أن الأمر استغرق بعض الوقت لكتابة هذا الحل الشامل. أقدر المساعدة والدعم.

أتمنى لك نهاراً/مساءً سعيداً :slight_smile:

4 إعجابات
4

مرحباً @riteshsaini. :wave:
لقد نقلت هذا الموضوع إلى #support، حتى تتمكن من تمييز إجابة @Don الرائعة كحل. :slight_smile:

إعجابَين (2)
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.