Le « Voir x nouveaux ou mis à jour sujets » est mal aligné après l'ajout d'animations

UX
1

La PR a ajouté une animation à l’alerte de nouveau sujet. Elle semble bonne dans l’ensemble, mais elle a accidentellement cassé le mécanisme d’alignement d’origine.

La cause profonde est que transform: translateX(50%); n’a pas fonctionné avec la nouvelle animation CSS animation: float-down 250ms ease-in-out forwards;. Lorsque l’animation est activée, le transform d’origine devient invalide.

Le bogue peut être vu à partir du fichier ci-joint.

image

1 « J'aime »
2

Puisque transform et l’ animation de descente flottante (float-down) entrent en conflit, je pense qu’il y a deux façons de résoudre ce problème :

  1. Ajouter une nouvelle classe d’animation float-down-center à dicourse.scss, incluant transform: translateX(50%); dans les keyframes.
  2. Changer la façon dont le bouton est aligné, de :
.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);
    }

Si c’est le cas, je vais créer une PR pour la fusion.
Veuillez prendre le temps de regarder. @bryce

1 « J'aime »
3

(message supprimé par l’auteur)

2 « J'aime »
4

(message supprimé par l’auteur)

5

(message supprimé par l’auteur)

6

(message supprimé par l’auteur)

7

@jordan.vidrine j’ai aussi eu l’impression de le remarquer

9

J’ai une petite correction pour cela, je fusionnerai bientôt.

2 « J'aime »
10

J’ai fusionné votre PR à la place. Merci !

1 « J'aime »