Retour à la leçonMission
Mission : un badge de succès qui clignote et disparaît trop tôt
Corriger un usage risqué de transition: all et un flash de fin d'animation sur un badge de validation de commande.
Contexte
Sur commande.css, le bouton .btn-valider utilise transition: all 0.3s; pour animer sa couleur au survol. Une fois la commande validée, un badge .badge-succes reçoit dynamiquement la classe .apparait, qui déclenche animation: apparition 0.4s ease-out; (sans autre réglage d'animation). Deux bugs sont observés : la hauteur du bouton "saute" visiblement pendant le survol à cause d'un changement de padding lié au JS, et le badge de succès clignote en redevenant invisible juste après son apparition.