Il "Vedi x nuovi o aggiornati argomenti" è disallineato dopo l'aggiunta di animazioni

UX
1

La PR ha aggiunto un’animazione al nuovo avviso argomento. Sembra buona nel complesso, ma ha accidentalmente interrotto il meccanismo di allineamento originale.

La causa principale è che transform: translateX(50%); non funzionava con la nuova animazione CSS animation: float-down 250ms ease-in-out forwards;. Quando l’animazione viene attivata, il transform originale diventa non valido.

Il bug può essere visto dal file allegato.

image

1 Mi Piace
2

Poiché transform e l’animazione float-down sono in conflitto tra loro, penso ci siano due modi per risolverlo:

  1. Aggiungere una nuova classe di animazione float-down-center a dicourse.scss, includendo transform: translateX(50%); nel keyframe.
  2. Modificare il modo in cui il pulsante è allineato, da:
.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);
    }

a

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

In tal caso, alzerò una PR per la fusione.
Per favore, prenditi del tempo per vederla. @bryce

1 Mi Piace
3

(post eliminato dall’autore)

2 Mi Piace
4

(post eliminato dall’autore)

5

(post eliminato dall’autore)

6

(post eliminato dall’autore)

7

@jordan.vidrine anche io l’avevo notato

9

Ho una piccola correzione pronta per questo, la unirò presto.

2 Mi Piace
10

Ho unito la tua PR invece. Grazie!

1 Mi Piace