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.
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 :
float-down-center à dicourse.scss, incluant transform: translateX(50%); dans les keyframes..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
(message supprimé par l’auteur)
@jordan.vidrine j’ai aussi eu l’impression de le remarquer
J’ai une petite correction pour cela, je fusionnerai bientôt.
J’ai fusionné votre PR à la place. Merci !