"رؤية س مواضيع جديدة أو محدثة" غير محاذٍ بعد إضافة الرسوم المتحركة

[small-lovely-cat]

أضاف PR رسومًا متحركة لتنبيه الموضوع الجديد. يبدو جيدًا بشكل عام ولكنه كسر عن طريق الخطأ آلية المحاذاة الأصلية.

السبب الجذري وراء ذلك هو أن transform: translateX(50%); فشل في العمل مع تنسيق CSS للرسوم المتحركة الجديد animation: float-down 250ms ease-in-out forwards;. عند تنشيط الرسوم المتحركة، يصبح transform الأصلي غير صالح.

يمكن رؤية الخطأ من الملف المرفق.

[small-lovely-cat]

بما أن transform و animation الخاصة بـ float-down تتعارضان مع بعضهما البعض، أعتقد أن هناك طريقتين لحل ذلك:

1. إضافة فئة تحريك جديدة float-down-center إلى dicourse.scss، وتضمين transform: translateX(50%); في إطار الحركة (keyframes).
2. تغيير طريقة محاذاة الزر، من:

.show-more {
    &.has-topics {
      @include viewport.from(md) {
        position: absolute;
        z-index: z("base");
        width: auto;
        right: 50%;
        transform: translateX(50%);
        font-size: var(--font-down-1-rem);

        .alert {
          border-radius: var(--d-border-radius-large);
        }
      }

      @include d-animation(float-down, 250ms, ease-in-out);
    }

إلى:

.show-more {
    &.has-topics {
      @include viewport.from(md) {
        position: absolute;
        z-index: z("base");
        width: fit-contenet;
        left: 0;
        right: 0;
        margin: auto;
        font-size: var(--font-down-1-rem);

        .alert {
          border-radius: var(--d-border-radius-large);
        }
      }

      @include d-animation(float-down, 250ms, ease-in-out);
    }

إذا كانت هذه هي الحالة، فسأقوم بإنشاء طلب سحب (PR) للدمج.
يرجى تخصيص بعض الوقت للنظر في الأمر. @bryce

[small-lovely-cat]

(تم حذف المنشور من قبل المؤلف)

[small-lovely-cat]

(تم حذف المنشور من قبل المؤلف)

[small-lovely-cat]

(تم حذف المنشور من قبل المؤلف)

[small-lovely-cat]

(تم حذف المنشور من قبل المؤلف)

[chapoi]

@jordan.vidrine لقد لاحظت هذا أيضًا