Das „x neue oder aktualisierte Themen anzeigen“ ist nach dem Hinzufügen von Animationen falsch ausgerichtet

UX
1

Der PR hat eine Animation zur neuen Themenbenachrichtigung hinzugefügt. Er scheint insgesamt gut zu sein, hat aber versehentlich den ursprünglichen Ausrichtungsmechanismus beschädigt.

Die eigentliche Ursache dafür ist, dass transform: translateX(50%); mit der neuen Animations-CSS animation: float-down 250ms ease-in-out forwards; nicht funktionierte. Wenn die Animation aktiviert wird, wird das ursprüngliche transform ungültig.

Der Fehler ist in der angehängten Datei zu sehen.

image

1 „Gefällt mir“
2

Da transform und die animation für das Herunterfallen sich gegenseitig beeinträchtigen, denke ich, dass es zwei Möglichkeiten gibt, dies zu lösen:

  1. Hinzufügen einer neuen Animationsklasse float-down-center zu dicourse.scss, einschließlich des transform: translateX(50%); in den Keyframe.
  2. Ändern der Art und Weise, wie die Schaltfläche ausgerichtet ist, von:
.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);
    }

zu

.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);
    }

Falls dies der Fall ist, werde ich einen PR zum Mergen erstellen.
Bitte nehmen Sie sich Zeit, es anzusehen. @bryce

1 „Gefällt mir“
3

(Beitrag vom Autor gelöscht)

2 „Gefällt mir“
4

(Beitrag vom Autor gelöscht)

5

(Beitrag vom Autor gelöscht)

6

(Beitrag vom Autor gelöscht)

7

@jordan.vidrine Ich dachte auch, ich hätte das bemerkt

9

Dafür gibt es eine kleine Korrektur, wird bald zusammengeführt.

2 „Gefällt mir“
10

Ihren PR stattdessen zusammengeführt. Danke!

1 „Gefällt mir“